3. 給容器div使用單獨的背景色（流體布局）

這種布局可以說是就是第二種布局方法，只是這里是一種多列的流體等高列的布局方法。前面也說過了，其實現原理就是給每一列添加相對應用的容器，并進行相互嵌套，并在每個容器中設置背景色。這里需要提醒大家你有多少列就需要多少個容器，比如說我們說的三列，那么你就需要使用三個容器

3.1 三列：

HTML:

CSS:

3.2 二列

HTML:

CSS:

原理：

我們有三列，并且也說過了，這三列內容都放在了三個容器的div中，我們每一列的背景色不是放在內容列中，而是放置在容器中，現在我們需要通過對容器進行相對定位，把背景顯示出來，而且我們這個容器是最外層的不能進行相對定位的移動

上面我們把容器進行了相對定位，這樣一來，我們內容也相應的做了移動，現在我們需要對頁面列的內容也進行相對定位，并把內容和容器進行相反方向的定位，這樣內容和容器背景色就能對應上了，請看下圖所展示的

接下來我們需要把溢出的部分切掉去，和前面一相，在最外面的容器加上overflow:hidden這樣就OK了

最后為了讓你的效果更加好看一點，你可以嘗試給他們加上padding，比如說每列加上2%的padding值，具體實現可以簡單從下圖中得到

優點是兼容各瀏覽器，可以制作流體等高列，交無列數限制

標簽使用較多，結構過于復雜，不易于理解，不過你掌握了其原理也就不難了，這也不算太大缺點

總結

以上是生活随笔為你收集整理的CSS之创建等高列布局之二的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。