页面布局之三栏布局的5种方案

题目：

假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为300px，中间自适应的设置方案有几种？

这里考察的是你对CSS的理解

首先初始化样式

body{
    margin:0;
    padding:0;
}

HTML编写

由于三栏布局HTML代码几乎差不多，下面就不过多重复编写了。

<body>
    <section>
        <h2>三栏布局</h2>
        <article class='container1'>
            <div class='left'></div>
            <div class='center'>
                <h3>这是xxx解决方案</h3>
                <p>这是三栏布局左右固定中间自适应</p>
            </div>
            <div class='right'></div>
        </article>
    </section>
</body>

注：浮动解决方案需要将.center的类标签与.right类互换即可。

下面我们将通过修改css样式来解决布局方案，样式的container1可根据下面方案自行修改即可。

1.浮动解决方案

.container1 div{min-height: 100px;}
.container1 .left,
.container1 .right{ 300px;background: #ccc;}
.container1 .left{float: left;}
.container1 .right{float: right;}
.container1 .center{background: palegreen;}

优点： 兼容性比较好；把清除浮动和周边元素的关系处理好的话。

**缺点： **清除浮动，浮动以后脱离文档流，处理不好会带来很多问题，本身的局限性。

2.定位解决方案

.container2{min-height: 100px;position: relative;}
.container2 div{min-height: 100px;position: absolute;}
.container2 .left,
.container2 .right{ 300px;background: #ccc;}
.container2 .center{background: palegreen;left: 300px;right: 300px;}
.container2 .left{left: 0;}
.container2 .right{right: 0;}

优点： 快捷，配合js使用不容易出问题。

缺点： 布局已经脱离文档流了，就意味下面所有子元素也必须脱离文档流，导致了这个方案的可使用性比较差。

3.flex box 解决方案

.container3{display: flex;}
.container3 div{min-height: 100px;}
.container3 .left,
.container3 .right{ 300px;background: #ccc;}
.container3 .center{flex: 1;background: palegreen}

优点： 解决了上面两个方案的不足

缺点： IE8及以下不支持 flex

4.表格 table 解决方案

.container4{display: table; 100%;min-height: 100px;}
.container4 div{display: table-cell;}
.container4 .left,
.container4 .right{ 300px;background: #ccc;}
.container4 .center{background: palegreen;}

优点： 轻易的做到，表格兼容性非常好，flex解决不了的（IE8不支持flex），想实现同样效果可以用表格。

缺点： 历史的诟病以外，其中某一个单元格的高度超出了的时候，两侧的单元格也是要调整高度的；有时候的场景是不需要同时增高的。

5.新技术 Grid 方案

.container5{
     100%;
    display: grid;
    grid-template-rows: 100px;
    grid-template-columns: 300px auto 300px;
}
.container5 div{min-height: 100px;}
.container5 .left,
.container5 .right{background-color: palegreen;}
.container5 .center{background-color: #ccc;}

优点： 可以做很多复杂的布局，代码量也简化很多，是未来的趋势；

缺点： 兼容性问题，各种浏览器及旧版本支持不是很好。

知识扩展

在业务中的方案根据上面的优缺点来应对需求使用相应的布局方案。笔者考虑到兼容性及其他因素在这里推荐 flex和table俩种方案。

三栏布局上下高度固定

看了上面那么多方案，是否自己也可以手动实现一下三栏上下高度固定，中间自适应

<body>
    <section class='flex-layout'>
        <h2>7.三栏布局上下固定, 中间自适应:flex box方案</h2>
        <article class="three_columns">
            <div class="top">上</div>
            <div class="middle">
                <h1>flex box布局</h1>
            </div>
            <div class="bottom">下</div>
        </article>
    </section>
</body>

CSS样式

.three_columns{
     300px;
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 20px;
}
.three_columns .top,
.three_columns .bottom{height: 300px;background: palegreen;}
.three_columns .middle{
    flex: 1;
    background: #ccc;
    overflow: auto;
}

两栏布局

实现俩栏布局,右边固定,左边自适应

<body>
    <section>
        <h2>6.俩栏布局</h2>
        <article class='two-column'>
            <div class="left"></div>
            <div class="right">
                <h3>这是俩栏布局,右边固定,左边自适应</h3>
                <p>这是俩栏布局,右边固定,左边自适应</p>
            </div>
        </article>
    </section>
</body>

CSS样式

.two-column{display: flex;}
.two-column div{min-height: 100px;}
.two-column .right{ 400px;background: palegreen;}
.two-column .left{flex:1;background: #ccc}

总结：语义化标签对SEO更友好。代码书写的规范方便后期的维护。

本章代码在线阅览效果地址

如果你觉得该文章能帮助到你，这里欢迎star小星星。