聖杯布局
html:
center left right
css:
#container {
padding: 0 100px 0 200px;
}
.col {
float: left;
position: relative;
height: 300px;
}
#center {
width: 100%;
background: #eee;
}
#left {
width: 200px;
background: blue;
margin-left: -100%;
right: 200px;
}
#right {
width: 100px;
background: red;
margin-right: -100px;
}
效果如圖:
雙飛翼布局
html:
center left right
css:
.col {
float: left;
height: 300px;
}
#center {
width: 100%;
background: #eee;
}
#left {
width: 200px;
background: blue;
margin-left: -100%;
}
#right {
width: 100px;
background: red;
margin-left: -100px;
}
#center .wrap {
margin: 0 100px 0 200px;
}
效果如圖:
兩種布局的差別
這兩種布局實作的都是兩邊固定寬度,中間自适應,中間欄放在最前面優先渲染。
不同的是,雙飛翼布局多建立一個包裹的div,去掉了相對定位,css相對少寫一些。
個人認為聖杯布局結構更簡潔,平常工作中就看大家自己的選擇了。