圣杯布局
2016-12-17 本文已影响0人
WPeach
解决的问题
1.中间（重要）部分能先加载
2.两边固定宽度，中间自适应宽度
原理
负边距。采用中间宽度100%，左右两边margin-left为负值。
具体实现
圣杯布局的最终效果：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;
}
效果：
