css实现三栏自适应布局（两边固定，中间自适应）以及优缺点

时间 2019-12-13

原文原文链接

方法一：绝对定位（absolute + margin）

原理：给左右两边的元素设置absolute，这样左右两边的元素脱离标准文档流的控制，中间的元素天然会上来，而后给中间的元素设置margin留出左右两边元素的位置，也就是说margin-left = “左边元素的宽度” margin-right = "右边元素的宽度"浏览器

优势：三个div的顺序是任意的布局

缺点：要对样式进行初始化，不然元素间会出现空隙，由于使用了absolute，若是页面还有其余内容处理时要当心！flex

注：随着浏览器窗口缩小，会发生压缩，左右元素重叠spa

代码：3d

<style>
        *{
            padding: 0;
            margin: 0;
        }
        .left,.right{
            width: 200px;
            height: 200px;
            position: absolute;
        }
        .left{
            background-color: green;
            left: 0;
        }
        .right{
            background-color: blue;
            right: 0;
        }
        .center{
            height: 200px;
            margin-left: 200px;
            margin-right: 200px;
            background-color: red;
        }
</style>
<body>
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="center">center</div>
</body>

效果：code

方法二：自身浮动（float）

原理：给左右元素分别设置左浮动和右浮动，这样左右元素就脱离了标准文档流的控制，但中间的元素还在标准文档流中，以后给中间的元素设置margin，设置方法同方法一blog

优势：受外界因素影响小文档

缺点：三个div的顺序有固定性，由于中间的元素任然在文档流中，因此要放在最后面，左右元素顺序不固定，这也是与绝对定位不一样的地方it

注：随着浏览器窗口缩小，右边元素会被挤到下一行io

代码：

 <style>
        .left,.right{
            width: 200px;
            height: 200px;
        }
        .left{
            background-color: green;
            float: left;
        }
        .right{
            background-color: blue;
            float: right;
        }
        .center{
            height: 200px;
            margin-left: 200px;
            margin-right: 200px;
            background-color: red;
        }
</style>
<body>
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="center">center</div>
</body>

效果：

方法三：圣杯布局（BFC+负margin）

原理：使用margin负值法，使用圣杯布局首先须要将中间元素用div包住，设置float使其造成一个BFC，而且要设置宽度，整个宽度和左边元素的margin负值要相互配合，也就是margin-left = "-中间元素外层div宽度" ，右边元素的margin负值要和它本身的宽度配合，也就是margin-left = “-右边元素宽度”

优势：三栏有相互关联性，有抗性

缺点：三个元素的顺序也是固定的，中间元素要放置在最前面，左右元素顺序不固定，而且左元素的margin-left = "中间元素外层div宽度"

注：随着浏览器窗口缩小，会发生压缩，左右元素重叠，继续缩小以后右边元素会又会被挤到下一行，可是同方法二有不一样

代码：

<style>
        .wrap{
            width: 100%;
            float: left;
        }
        .left,.right{
            width: 200px;
            height: 200px;
        }
        .left{
            background-color: green;
            float: left;
            margin-left: -100%;
        }
        .right{
            background-color: blue;
            float: left;
            margin-left: -200px;
        }
        .center{
            height: 200px;
            background-color: red;
        }
</style>
<body>
    <div class="wrap">
        <div class="center">center</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</body>

效果：

方法四：flex布局

原理：将左中右三个元素用div包裹起来，给外层div设置display:flex，以后给中间元素设置flex:1

优势：解决了以前方式带来的问题，例如浮动

缺点：三个元素的顺序也是固定的，中间元素要放在中间，不能兼容IE8及如下浏览器。

注：随着浏览器窗口的缩小，会发生压缩，可是不会重叠和换行

代码：

<style>
        .wrap{
            width: 100%;
            display: flex;
        }
        .left,.right{
            width: 200px;
            height: 200px;
        }
        .left{
            background-color: green;
        }
        .right{
            background-color: blue;
        }
        .center{
            flex: 1;
            height: 200px;
            background-color: red;
        }
</style>
<div class="wrap">
        <div class="left">left</div>
        <div class="center">center</div>
        <div class="right">right</div>
</div>

效果：

注：其实还有网格布局和表格布局