三栏布局的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种方案的主要内容,如果未能解决你的问题,请参考以下文章