典型的布局示例
如上圖所示的布局，方格中間有一定的間隙，間隙是固定的。應該如何布局會更加完美呢，比如要保證在布局完成的情況下，可以快速的添加一個元素依然保持這樣的布局。
以及當出現第二行的時候，這樣的布局依然能夠不受影響。又不用修改太多的内容。
設定寬為100%和塊元素的預設寬度
現在在這裡說一個問題，就是塊元素的寬度預設是占滿一行，我們很容易和給元素設定100%混淆。其實呢，這兩個雖然表現上很容易讓我們以為他們展現的效果是一樣的，因為這兩種方式都是占滿了父元素。但是他們之間還是有很大的差別的。
他們的差別主要在于元素的寬度是随着什麼而變化的，如果設定100%的話，那麼該元素的width始終是和父元素保持一緻的，給該元素設定的margin是不會影響該元素width變化的。當然僅有父元素的寬度會影響該元素的width變化。
如果不設定寬的話，塊元素是獨占一行的，那麼該元素的width，不僅受父元素的影響，也受該元素的margin的影響。
獨占一行的塊元素的寬設定margin的影響
記住以下兩條規律
- 當給一個未設定寬的塊級元素，設定了margin（水準方向）的話，那麼margin值（正值）加上改元素的width的和等于父元素的寬度
- 當給一個未設定寬的塊級元素，設定了margin（水準方向）的話，那麼margin值（負值）剛好是該元素的寬度超出父元素的距離
如下圖所示：
規律1示例：
規律2示例：
解決方案
劃分平均區域
首先在一個橫向區域，平分了5份，且橫向排列，那麼我們采用浮動的橫向排列，且平均把每個元素設定成20%。
<ul class="list">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul> .list{
overflow: hidden;
}
.list li{
width: 20%;
height: 100px;
float: left;
} 在每個區域中放置内容，通過margin-right隔出間隔
<ul class="list">
<li>
<div class="content"></div>
</li>
<li>
<div class="content"></div>
</li>
<li>
<div class="content"></div>
</li>
<li>
<div class="content"></div>
</li>
<li>
<div class="content"></div>
</li>
</ul> .list{
overflow: hidden;
}
.list li{
width: 20%;
height: 100px;
float: left;
}
.content{
margin-right: 10px;
} 此時我們可以想象到，最後一個元素還多了一個10px的間距，那麼最後一步就是如何解決這個間距的問題。
拉伸父元素，隐藏尾部的間隙
我們給list再套一個元素，讓list在其父元素下拉伸，剛好隐藏掉多餘的部分。
<div class="wrapper">
<ul class="list">
<li>
<div class="content"></div>
</li>
<li>
<div class="content"></div>
</li>
<li>
<div class="content"></div>
</li>
<li>
<div class="content"></div>
</li>
<li>
<div class="content"></div>
</li>
</ul>
</div> .wrapper{
width: 800px;
overflow: hidden;
}
.list{
overflow: hidden;
margin-right: -10px;
}
.list li{
width: 20%;
height: 100px;
float: left;
}
.content{
margin-right: 10px;
} 可以檢視實際效果，最終能實作我們開頭所展示的效果！且這種布局方式有很多的擴充性，如果一行是4個，那麼隻需要把每個元素的寬設定為 25%,且在元素的個數中減去一個就行。
本文完~