CSS左右div等高是進行網頁布局時的常見需求。很多時候,我們需要在一個頁面中,將兩個div放在左右兩側,且這兩個div的高度要保持一致。那么該如何實現呢?下面我們來介紹一下兩種常見的方案。
第一種方案是通過在CSS中設置display屬性為table和table-cell來實現。具體代碼如下:
.container { display: table; } .left, .right { display: table-cell; vertical-align: top; }
在這個方案中,我們將容器的display屬性設置為table,左右兩個div的display屬性設置為table-cell。同時,為了保證兩個div上下對齊,我們還需要將它們的垂直對齊方式設置為top。
第二種方案則是通過偽元素來實現。具體代碼如下:
.container { position: relative; } .left, .right { position: absolute; top: 0; bottom: 0; } .left { left: 0; right: 50%; } .right { left: 50%; right: 0; } .right::before { content: ""; height: 100%; float: left; }
在這個方案中,我們將左右兩個div的position屬性設置為absolute,并將它們的top和bottom屬性都設置為0。接著,我們通過left和right屬性將左右兩個div分別定位到容器的左右兩側。
但是,由于我們還需要保證這兩個div的高度一致,因此我們需要使用一個偽元素。我們將其content屬性設置為空字符串,將height屬性設置為100%,將float屬性設置為left,這樣這個偽元素就會處于右側div上方,且其高度與右側div的高度相同。
通過這兩種方案,我們就可以輕松地實現CSS左右div等高。可以根據具體的需求選擇更加適合的方案來進行實現。
上一篇css左右兩列布局
下一篇css左右彈出二級菜單