CSS設(shè)計多列多模塊等高網(wǎng)頁布局

2024-08-30 08:36:44

字體：大中小

供稿：網(wǎng)友

　　首先給大家看一個圖：

　　以前我們在布局這種需要多列多模塊，多列等高，一般會選擇橫著切一張背景圖來進(jìn)行模擬，這個也是沒有辦法的辦法。

　　我們知道單純的兩列等高我們可以利用正內(nèi)邊距加負(fù)外邊距來實現(xiàn)。padding-bottom:32767px; margin-bottom:-32767px;

　　這個方法的原理是事先通過正內(nèi)邊距來使其擁有足夠高的布局控件，然后通過負(fù)外邊距來使得其的位置不變。通過給父元素溢出隱藏，我們可以隱藏掉事先占據(jù)的足夠高的空間。由兩列實際的內(nèi)容高度來決定整個父元素的高度，從而實現(xiàn)了等高。

　　習(xí)慣思維上，我們都是多列等高，然后把這幾列都浮動。現(xiàn)在我們變換一下思路，直接使用不浮動的一列的時候，情況會怎樣，我們發(fā)現(xiàn)，當(dāng)一列不浮動搭配正內(nèi)邊距加負(fù)外邊距，父元素溢出隱藏，它的高度跟還是由內(nèi)在元素來決定，但是通過web developer toolbar我們可以看到它實際上已經(jīng)占據(jù)了足夠的高度空間。

　　同樣的道理，定位也遵循這個規(guī)則。我們可以把兩側(cè)邊框使用絕對定位來固定到兩側(cè)，因為絕對定位是不占布局空間的，那么我們需要一個文檔流來對父元素進(jìn)行占位。基本上父元素有多高，就顯示絕對定位的元素多少內(nèi)容，實際上這也就實現(xiàn)了一個等高。

　　知道了這個表現(xiàn)原理，那么我們上文的布局也就不難了，只需要把每列最后一個模塊再進(jìn)行正內(nèi)邊距加負(fù)外邊距來進(jìn)行空間占位就可以實現(xiàn)了！至于下邊框，實際上另外一個容器從底下進(jìn)行拼裝實現(xiàn)的~！

　　下面放上全部代碼：

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>無標(biāo)題 1</title><style type="text/css">* {margin: 0; padding: 0;}body {margin:30px;font:14px/1.6em verdana, lucida, arial, helvetica, 宋體,sans-serif; }.main {overflow: hidden; width: 800px; margin: 0 auto;}.left {float: left; width: 250px; overflow: hidden; }.center {float:left; margin-left:5px; width:295px; }.right {float: right; width: 245px; overflow: hidden;}.bor_top { height:1px; background:#fb9d51; overflow:hidden; }.equal {padding-bottom: 32767px; margin-bottom: -32767px;}.box {background: #f5e2af; border: 1px #fb9d51 solid; padding-left:10px; padding-right:10px;}.mt5 {margin-top: 5px;}</style></head><body><div class="main"><div class="left equal"><div class="box"><p>你相信這個左右等高的布局是純的css寫的嗎？</p></div><div class="box mt5"><p>來測試一下吧？~！</p></div><div class="box mt5"><p>測試一下</p></div><div class="equal mt5 box"><p>測試一下</p><p>測試一下</p><p>測試一下</p><p>測試一下</p><p>測試一下</p><p>測試一下</p><p>測試一下</p><p>測試一下</p><p>測試一下</p><p>測試一下</p><p>測試一下</p><p>測試一下</p><p>測試一下</p><p>測試一下</p><p>測試一下</p><p>測試一下</p><p>測試一下</p><p>測試一下</p></div></div><div class="center equal"><div class="box"><p>不由得你不信，這個的確是純css寫的</p></div><div class="box mt5"><p>來測試一下吧？~！</p></div><div class="box mt5"><p>測試一下</p></div><div class="equal mt5 box"><p>測試一下</p><p>測試一下</p><p>測試一下</p><p>測試一下</p><p>測試一下</p><p>測試一下</p><p>測試一下</p><p>測試一下</p><p>測試一下</p></div></div><div class="equal right"><div class="box"><p>測試一下</p><p>測試一下</p></div><div class="box mt5"><p>測試一下</p><p>測試一下</p><p>測試一下</p></div><div class="box mt5"><p>測試一下</p><p>測試一下</p><p>測試一下</p><p>測試一下</p><p>測試一下</p><p>測試一下</p></div><div class="equal mt5 box"><p>測試一下</p><p>測試一下</p><p>測試一下</p></div></div></div><div class="main"><div class="left bor_top"></div><div class="center bor_top"></div><div class="right bor_top"></div></div></body></html>
[ctrl+a 全部選擇提示：你可先修改部分代碼，再按運行]

　　上述代碼在ie6,ie7,firefox里皆能正常顯示，但是在ie8 beta1里面，似乎必須配合浮動，正內(nèi)邊距跟負(fù)外邊距的多余空間才能被隱藏，希望正式版的ie8會修復(fù)這一點。如果想在ie8 beta1里面正常顯示，請大家把最后一個模塊也進(jìn)行浮動即可~！在此就不做演示了！

上一篇：雅黑字體對IE顯示網(wǎng)頁布局的影響

下一篇：完美三欄網(wǎng)頁布局例子