有3個水平方向的塊，塊的內容有多有少。在不設定高度的情況下，高度不等。現要求3個水平塊都有相同的高度，高度等於最高的塊的高度。
使用table布局。在table中，在同一行中的單元格是等高的。
如下：通過設定padding-bottom把塊的高度撐開，使得他們遠遠大於內容的高度。再設定margin-bottom，在沒有為塊設定高度的情況下，計算塊的高度時，會使用padding-bottommargin-bottom加上內容高度的方式計算高度。把margin-bottom設定成負值，絕對值等於padding-bottom。這樣計算出的高度就等於內容的高度。這時最高的塊的高度決定了父元素的高度。子元素的顯示效果則包括padding的效果。最後再為父元素設定overflow: hidden把多於最高子元素高度的部分隱藏掉即可實現。
純CSS實現多列等高
overflow negtive margin 多列高邊距實現 overflow negtive margin多列高邊距實現 overflow negtive margin 多列高邊距實現 title style type text css body parent child style head ...
css 等高列的簡單實現
又碰到css等高布局的問題，發現以前沒有總結，這裡再把基本原理寫一下吧。左邊，無高度屬性，自適應於最高一欄的高度 右邊，無高度屬性，自適應於最高一欄的高度 中間，寬度自適應中間，寬度自適應中間，寬度自適應中間，寬度自適應中間，寬度自適應中間，寬度自適應中間，寬度自適應中間，寬度自適應中間，寬度自適應...
CSS 多列等高
高度不一的列以等高方式布局。設計師說某頁面的新聞介紹，由於新聞內容不同導致顯示區域的高度不一致，現需要使其高度視覺上保持一致。小加同學覺得必須迅速解決，讓設計師妹妹知道我們程式師哥哥的威武。原型設計稿大致如下 直接使用bootstrap的col 來實現這個簡單的布局就ok啦 class sectio...