css实现等高布局两栏自适应布局三栏自适应布局

最新推荐文章于 2024-08-09 16:30:00 发布

charlene程程

最新推荐文章于 2024-08-09 16:30:00 发布

阅读量4.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： css 布局文章标签： css 布局

本文链接：https://blog.youkuaiyun.com/charlene0824/article/details/51222502

css 同时被 2 个专栏收录

18 篇文章

订阅专栏

布局

3 篇文章

订阅专栏

本文总结了CSS布局中常见的等高布局、两栏自适应布局和三栏自适应布局的实现方法，包括padding补值法、flex布局、display: table-cell等，以及浮动布局和绝对定位在两栏和三栏布局中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

总结一下css常用的布局样式

等高布局

等高布局实现方法有很多在这里总结常用的三种方法

padding补值法

该方法是通过负margin，同时将padding的值设为正的margin值实现的具体实现方法如下：

<div class="container">
    <div class="item1">该方法是通过负margin，同时将padding的值设为正的margin值实现的 该方法是通过负margin，同时将padding的值设为正的margin值实现的 该方法是通过负margin，同时将padding的值设为正的margin值实现的 </div>
    <div class="item2">该方法是通过负margin，同时将padding的值设为正的margin值实现的 该方法是通过负margin，同时将padding的值设为正的margin值实现的 该方法是通过负margin，同时将padding的值设为正的margin值实现的 该方法是通过负margin，同时将padding的值设为正的margin值实现的 该方法是通过负margin，同时将padding的值设为正的margin值实现的 该方法是通过负margin，同时将padding的值设为正的margin值实现的 </div>
</div>

相应的css实现如下

.container{
        width:800px;
        background-color: #98F59E;
        overflow: hidden;

    }
    .item1,.item2{
        float:left;
        width:300px;
        background-color: #96FCEF;
        word-wrap: break-word;
        margin-left:10px;
        margin-bottom: -10000px;
        padding-bottom:10000px;
        border: 2px solid #A7525C;
    }

运行结果如下：

这里写图片描述

该方法的缺点是等高的div没有底边的边框。常用的解决方式是使用背景图来模仿底部边框或使用div来模仿列的边框。下面主要介绍第二种方法，第二种方法主要是在等高元素中加入一个相对于容器绝对定位的div元素，并设置其高度为边框高度

<div class="container">
    <div class="item1">该方法是通过负margin，同时将padding的值设为正的margin值实现的 该方法是通过负margin，同时将padding的值设为正的margin值实现的 该方法是通过负margin，同时将padding的值设为正的margin值实现的
    <div class='colBottom1'></div>
    </div>
    <div class="item2">该方法是通过负margin，同时将padding的值设为正的margin值实现的 该方法是通过负margin，同时将padding的值设为正的margin值实现的 该方法是通过负margin，同时将padding的值设为正的margin值实现的 该方法是通过负margin，同时将padding的值设为正的margin值实现的 该方法是通过负margin，同时将padding的值设为正的margin值实现的 该方法是通过负margin，同时将padding的值设为正的margin值实现的
    <div class='colBottom2'></div>
    </div>
</div>

<style type="text/css">
.container{
        width:800px;
        background-color: #98F59E;
        overflow: hidden; 
        position: relative;

    }
    .item1,.item2{
        float:left;
        width:300px;
        background-color: #96FCEF;
        word-wrap: break-word;
        margin-left:10px;
        margin-bottom: -10000px;
        padding-bottom:10000px;
        border: 2px solid #A7525C;

    }
    .colBottom1{
        position: absolute;
        bottom: 0;
        left: 10px;
        height: 2px;
        width: 304px;
        background-color:#A7525C; 

    }
    .colBottom2{
        position: absolute;
        bottom: 0;
        left: 324px;
        height: 2px;
        width: 304px;
        background-color:#A7525C; 

    }
</style>

其运行结果如下
这里写图片描述

flex布局法：

通过将包含等高布局div的父div设置为flex布局并且align-items为stretch实现等高布局

.container{
        width:800px;
        display:flex;
        align-items: stretch;
        background-color: #09EE4E;
    }
    .item1,.item2{
        width:300px;
        background-color: #42EBA2;
        margin-left:10px;
    }

截图如下

这里写图片描述

display值为table-cell

display值为table-cell可以实现等高布局实现方法如下

.container{
        width:800px;
        background-color: #09EE4E;

    }
    .item1,.item2{
        display: table-cell;
        width:300px;
        background-color: #42EBA2;
    }

值得注意的是这里子div设置margin没有作用

两栏自适应布局

浮动布局

采用的是左边浮动，右边加上一个margin-left值，让他实现左边固定，右边自适应的布局效果

    <div class="item1"><div><div class="item2"</div>
    .item1{
       float:left;
       width:300px;
       height:400px;
       background-color: #41D844;
    }
    .item2{
       margin-left: 310px;
       height:400px;
       background-color: #41D844;
    }

绝对定位实现

左边固定的的元素绝对定位并负边距，右边自适应元素设置margin-left的值来实现左边固定宽度右边自适应宽度的布局效果

.item1{
    position:absolute;
    margin-right: -100%;
    width:300px;
    height:400px;
    background-color: #41D844;
}
.item2{
    margin-left: 310px;
    height:400px;
    background-color: #41D844;
    }

三栏自适应布局

float+负margin实现方法

主要实现方法：HTML写元素的时候先写中间元素，在写左元素和右元素。css布局：容器元素、左元素和右元素都是左浮动，左元素设置负margin为-100%，右元素设置负margin为负右元素的宽度，中间元素在容器元素中，设置margin-left为左元素的宽度+左元素和中间元素的间隔，设置margin-right为右元素的宽度+右元素和中间元素的间隔。实现代码如下

    <div class="container"><div class="center"></div></div>
    <div class="left"></div>
    <div class="right"></div>

css实现等高布局 两栏自适应布局 三栏自适应布局

等高布局

两栏自适应布局

三栏自适应布局

css实现等高布局两栏自适应布局三栏自适应布局