1.使用浮动布局
优点:兼容性比较好。
缺点:浮动后,元素是脱离文档流的,需要谨慎处理好清除浮动还有浮动的元素和周边元素之间的关系
页面布局* {
margin: 0;
padding: 0;
}
.layout{
margin: 20px;
}
.layout article p{
min-height: 100px;
}
.layout.float .left{
float: left;
width: 300px;
background: red;
}
.layout.float .right{
float: right;
width: 300px;
background: blue;
}
.layout.float .center{
background: yellow;
}
浮动解决方案
1.这是三栏布局中间部分
1.这是三栏布局中间部分
注意:最要注意的一点是,中间列一定要放在左右两列的后面!!!
2.使用绝对定位布局
优点:布局相对迅速
缺点:定位的元素脱离了文档流,意味着其子元素也要脱离文档流,所以这种方式的可使用性比较差
页面布局* {
margin: 0;
padding: 0;
}
.layout{
margin: 20px;
}
.layout article p{
min-height: 100px;
}
.layout.absolute .left-right-center{
position: relative;
}
.layout.absolute .left{
position: absolute;
left: 0;
width: 300px;
background: red;
}
.layout.absolute .right{
position: absolute;
right: 0;
width: 300px;
background: blue;
}
.layout.absolute .center{
position: absolute;
left: 300px;
right: 300px;
background: yellow;
}
绝对定位解决方案
1.这是三栏布局绝对定位解决方案
1.这是三栏布局绝对定位解决方案
3.使用flex布局
优点: 很好的解决了浮动和绝对定位的缺点,现在移动端基本都是用flex布局
ie8以下 不支持flex
.layout.flex .left-right-center{
display: flex;
margin-top: 140px;
}
.layout.flex .left{
flex: 0 0 300px;
width: 300px;
background: red;
}
.layout.flex .right{
flex: 0 0 300px;
width: 300px;
background: blue;
}
.layout.flex .center{
flex: 1;
background: yellow;
}
Flexbox解决方案
1.这是三栏布局flexbox解决方案
1.这是三栏布局flexbox解决方
注意: 中间列要放在中间!!!
4.使用表格布局
优点:兼容性还不错
缺点:其中一栏内容高度增加,另外两栏的高度也会增加,有时我们并不需要他们同时增高;不利于搜索引擎抓取信息;
.layout.table .left-right-center{
width: 100%;
display: table;
height: 100px;
}
.layout.table .left{
display: table-cell;
width: 300px;
background: red;
}
.layout.table .right{
display: table-cell;
width: 300px;
background: blue;
}
.layout.table .center{
display: table-cell;
background: yellow;
}
表格布局解决方案
1.这是三栏布局表格布局解决方案
1.这是三栏布局表格布局解决方案
5.网格布局
.layout.grid .left-right-center{
width: 100%;
display: grid;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px;
}
.layout.grid .left{
background: red;
}
.layout.grid .right{
background: blue;
}
.layout.grid .center{
background: yellow;
}
网格布局解决方案
1.这是三栏布局网格布局解决方案
1.这是三栏布局网格布局解决方案
假如把高度已知去掉或者高度超出
1.flex布局高度可以自适应
2.表格布局奥杜可以自适应
3.浮动,绝对定位,网格布局不能自适应高度