圣杯布局

解决的问题

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;

}

效果：