4. 使用正padding和負margin對沖實現多列布局方法

這種方法很簡單，就是在所有列中使用正的上、下padding和負的上、下margin，并在所有列外面加上一個容器，并設置overflow:hiden把溢出背景切掉。下面一起來看代碼

HTML:

CSS:

這里代碼的關鍵就是’margin-bottom:-99999px’和’padding-bottom:99999px’

5. 使用邊框和定位模擬列等高

這種方法是使用邊框和絕對定位來實現一個假的高度相等列的效果。假設你需要實現一個兩列等高布局，側欄高度要和主內容高度相等

HTML：

CSS：

缺點：這個方法就是無法單獨給主內容列設置背景色，并且實現多列效果效果不佳

6. 模仿表格布局實列等高列效果

這種方法只適合現代瀏覽器，本不想介紹的，不過還是順便列出讓大家參考一下吧

HTML：

CSS：

優點：這是一種非常簡單，易于實現的方法

缺點：兼容性不好，在ie6-7無法正常運行

總結

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

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