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

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

3.1 三列：

HTML:

CSS:

3.2 二列

HTML:

CSS:

原理：

我們有三列，并且也說(shuō)過(guò)了，這三列內(nèi)容都放在了三個(gè)容器的div中，我們每一列的背景色不是放在內(nèi)容列中，而是放置在容器中，現(xiàn)在我們需要通過(guò)對(duì)容器進(jìn)行相對(duì)定位，把背景顯示出來(lái)，而且我們這個(gè)容器是最外層的不能進(jìn)行相對(duì)定位的移動(dòng)

上面我們把容器進(jìn)行了相對(duì)定位，這樣一來(lái)，我們內(nèi)容也相應(yīng)的做了移動(dòng)，現(xiàn)在我們需要對(duì)頁(yè)面列的內(nèi)容也進(jìn)行相對(duì)定位，并把內(nèi)容和容器進(jìn)行相反方向的定位，這樣內(nèi)容和容器背景色就能對(duì)應(yīng)上了，請(qǐng)看下圖所展示的

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

最后為了讓你的效果更加好看一點(diǎn)，你可以嘗試給他們加上padding，比如說(shuō)每列加上2%的padding值，具體實(shí)現(xiàn)可以簡(jiǎn)單從下圖中得到

優(yōu)點(diǎn)是兼容各瀏覽器，可以制作流體等高列，交無(wú)列數(shù)限制

標(biāo)簽使用較多，結(jié)構(gòu)過(guò)于復(fù)雜，不易于理解，不過(guò)你掌握了其原理也就不難了，這也不算太大缺點(diǎn)

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。