解決的問題
1.中間(重要)部分能先加載
2.兩邊固定寬度贮匕,中間自適應(yīng)寬度
原理
負邊距瘦真。采用中間寬度100%,左右兩邊margin-left為負值仗颈。
具體實現(xiàn)
圣杯布局的最終效果:http://alistapart.com/d/holygrail/example_1.html
html
<div class="bd">
???? <div class="main">中間</div>
???? <div class="left">左邊</div>
???? <div class="right">右邊</div>
</div>
css
.bd{
padding-left: 190px;
padding-right: 230px;
}
.bd .main,.bd .left,.bd .right{
float: left;
position: relative;
height: 200px;
}
.main {
background-color: #F4F4F4;
width:100%;
}
.left {
background-color: #11999E;
width:190px;
right:190px;
margin-left:-100%;
}
.right {
background-color: #6DECB9;
width:230px;
margin-right:-230px;
}
效果: