CSS設計多列多模塊等高網頁布局

DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> CSS設計多列多模塊等高網頁布局

CSS設計多列多模塊等高網頁布局

編輯：CSS進階教程

　　首先給大家看一個圖：

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

　　我們知道單純的兩列等高我們可以利用正內邊距加負外邊距來實現。padding-bottom:32767px; margin-bottom:-32767px;

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

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

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

　　知道了這個表現原理，那麼我們上文的布局也就不難了，只需要把每列最後一個模塊再進行正內邊距加負外邊距來進行空間占位就可以實現了！至於下邊框，實際上另外一個容器從底下進行拼裝實現的~！

　　下面放上全部代碼：

<!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>無標題 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裡面，似乎必須配合浮動，正內邊距跟負外邊距的多余空間才能被隱藏，希望正式版的IE8會修復這一點。如果想在IE8 BETA1裡面正常顯示，請大家把最後一個模塊也進行浮動即可~！在此就不做演示了！

上一頁:CSS布局:居左之後居右是100%寬度顯示問題
下一頁:css制作表單效果

CSS進階教程

使用CSS3將你的網站設計推向未來: 網頁制作poluoluo文章簡介：使用CSS3將你的網站設計推向未來. The
web前端開發經驗淺談:分享看過的書籍和成長過程: WEB前端研發工程師，在國內算是一個朝陽職業，這個領域沒有學校的正規教育，大多數人都是靠自己自學成才
css的優先級和!important與ie6的BUG: 網頁制作poluoluo文章簡介：!important在ie6下的一個BUG和CSS的優先級。

CSS基礎知識 Sass教程 CSS3基礎關於CSS CSS進階教程 DIV十CSS布局 CSS特效代碼 CSS詳解

小編推薦

網頁特效：圖片隨機顯示技巧 IE6、IE7、IE8怎麼才能支持CSS3 CSS樣式表在網頁設計中的4個特性直接將HTML頁面打印頁面的設計 CSS教程:CSS選擇器性能如何在一個頁面做兩種超鏈接的CSS樣式 HTML5和css3實例：制作HTML5驗證的網頁表單 CSS3網頁制作教程:Action:hovert 入門級教程 CSS的基本語法如何使用CSS來進行網頁排版

DIV CSS 佈局教程網

相關文章