左右两边宽度固定,中间自适应
左右两边绝对定位
可以利用浮动,左边的左浮动,右边的右浮动
css3 flex布局(html http://www.cnblogs.com/myzy/p/5919814.html)
table布局
grid布局 (https://www.w3cplus.com/css3/line-base-placement-layout.html)
第一种方法:左右两边绝对定位
html代码
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
css代码
.left {
height: 200px;
width: 300px;
background-color: blue;
position: absolute;
left: ;
top:
}
.right {
width:300px;
height: 200px;
background-color: red;
position: absolute;
right: ;
top:;
}
.middle{
height: 300px;
background-color: yellow;
margin: 300px;
}
优点:快捷,不容易出问题
缺点:子元素也脱离的文档流,这样有效性就相对还说比较差
如果高度不固定, 两边的模块不会随中间的部分改变而改变
第二种方法:可以利用浮动,左边的左浮动,右边的右浮动
css部分
#left {
width: 100px;
float: left;
background: green;
height: 300px;
} #right {
width: 100px;
float: right;
background: red;
height: 300px;
} #middle {
margin-right: 110px;
margin-left: 110px;
height: 300px;
background: #ccc;
}
html部分;
<div id="left">
</div>
<div id="right">
</div>
<div id="middle">
</div>
优点:兼容性好(处理好清除浮动,和周边元素的关系)
缺点:float后脱离文档流,处理不好会有很多问题,这个是这种排版的局限性。
如果高度不固定,不做修改,此方法不再好使,因为中间的部分会超出两边的部分。
第三种方法:css3 flex布局
css:
.content{
display:flex;
}
.left {
height: 200px;
width: 300px;
background-color:red
}
.right {
width:300px;
height: 200px;
background-color:blue;
}
.middle{
height: 300px;
background-color: yellow;
flex:;
}
html
<div class="content">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
优点:吸收了前面两个的优点
缺点:兼容性问题
如果高度不固定,两边的部分会随着中间部分变高。
第四种方法:table布局
css
.content{
display:table;
width:100%;
height: 100px;
}
.content>div{
display: table-cell;
}
.left {
height: 200px;
width: 300px;
background-color:red
}
.right {
width:300px;
height: 200px;
background-color:blue;
}
.middle{
height: 300px;
background-color: yellow;
}
html:
<div class="content">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
优点:兼容性特别好,例如ie8
缺点:同时增高的高度
如果高度不固定,两边的部分会随着中间部分变高。
第五种方法:grid布局
css:
.content{
display:grid;
width:100%;
grid-template-rows:100px;
grid-template-columns:300px auto 300px;
} .left {
height: 200px;
width: 300px;
background-color:red
}
.right {
width:300px;
height: 200px;
background-color:blue;
}
.middle{
height: 300px;
background-color: yellow;
}
html
<div class="content">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
如果高度不固定,所有的模块不会所内容增加而变高
上下固定中间自适应解决办法:http://www.cnblogs.com/pigtail/archive/2012/11/25/2787508.html