css 实现 三栏布局
常见布局方式:
float布局、position定位、table布局、弹性(flex)布局、网格(grid)布局。
前提是左右宽度(假如左右宽度为300px),整个高度已知(假如高度为100px),中间宽度自适应.
总结:
5种实现三栏布局的方式,那么他们的优缺点呢?
1、float布局是现在用的比较多的布局很多门户网站目前使用这个布局方式,使用的时候只需要注意一定要清除浮动。
2、Position布局只是根据定位属性去直接设置元素位置,个人感觉不太适合用做页面布局
3、table布局使用起来方便,兼容性也不存在问题,不利于搜索引擎抓取信息
4、flex布局比较强大,但是还是存在IE上兼容性问题,只能支持到IE9以上
5、grid布局很强大,但是兼容性很差。
1. float 布局
<style>
.left{
float:left;
width:300px;height:100px;background:#631d9f;
}
.right {
float:right;
width:300px;height:100;background: red;
}
.center {
margin-left:300px;
margin-right:300px;
background:green;
}
/* 使用了float, 所以为了不影响其他元素的显示这里需要清除浮动 */
.main:after {
content:"";
display:block;
clear:both;
}
</style