三栏布局的5种方案
Posted jing-tian
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了三栏布局的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{width: 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{width: 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{width: 300px;background: #ccc;}
.container3 .center{flex: 1;background: palegreen}优点： 解决了上面两个方案的不足
缺点： IE8及以下不支持 flex
4.表格 table 解决方案
.container4{display: table;width: 100%;min-height: 100px;}
.container4 div{display: table-cell;}
.container4 .left,
.container4 .right{width: 300px;background: #ccc;}
.container4 .center{background: palegreen;}优点： 轻易的做到，表格兼容性非常好，flex解决不了的（IE8不支持flex），想实现同样效果可以用表格。
缺点： 历史的诟病以外，其中某一个单元格的高度超出了的时候，两侧的单元格也是要调整高度的；有时候的场景是不需要同时增高的。
5.新技术 Grid 方案
.container5{
width: 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{
width: 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{width: 400px;background: palegreen;}
.two-column .left{flex:1;background: #ccc}总结：语义化标签对SEO更友好。代码书写的规范方便后期的维护。
如果你觉得该文章能帮助到你，这里欢迎star小星星。
以上是关于三栏布局的5种方案的主要内容，如果未能解决你的问题，请参考以下文章