等高布局是指多個元素的高度自適應成一致的狀態(tài),通常用于展示列表、卡片等場景。在CSS中,實現等高布局可以使用多種方法,以下是一種比較精簡的實現方式。
.container { display: flex; } .item { flex: 1; margin: 0 10px; padding: 10px; background-color: #eee; box-sizing: border-box; }
以上代碼定義了一個父容器(class為container),采用flex布局。子元素(class為item)采用flex: 1屬性,表示等分剩余空間并自適應高度。同時,margin和padding屬性用于控制元素之間和內部的間距與邊距,background-color和box-sizing則用于設置元素的背景色和盒模型。
通過以上CSS代碼的設置,我們就可以輕松地實現等高布局,無論元素的內容數量或高度如何變化,都會自動調整相對位置,呈現一致的高度效果。