左右固定宽,中间自适应(三栏布局)五种实现方法
简述:定高100px,左右宽度均为200px,中间自适应。
公共代码块
*{padding: 0; margin: 0;}
html, body {padding: 0; margin: 0;}
.wrap {margin-bottom: 10px;}
1、浮动—float
<style>
.wrap > div {
height: 200px; text-align: center; line-height: 200px; }
.float .left {
width: 200px;
float: left;
background-color: #f00;
}
.float .center {
background-color: green;
}
.float .right {
width: 200px;
float: right;
background-color: #ff0;
}
</style>
<div class="wrap float">
<div class="left">我是左边栏</div>
<div class="right">我是右边栏</div>
<div class="center">我是float</div>
</div>
float介绍
代码以及浏览器展示效果如上,浏览器拉伸也不会影响,可实现