我想創(chuàng)建一個(gè) 3 列的磚石佈局來(lái)渲染具有相同寬度但不同高度的項(xiàng)目,但是當(dāng)我嘗試下面的程式碼時(shí),我看到第三列是空的,這看起來(lái)有點(diǎn)奇怪。我能以某種方式修復(fù)它嗎?
我嘗試了這段程式碼,我希望第一列中有兩個(gè)項(xiàng)目,第二列和第三列中有一個(gè)項(xiàng)目。請(qǐng)注意,4 個(gè)相同高度的項(xiàng)目只是一個(gè)具體情況,最終我不知道會(huì)有多少個(gè)項(xiàng)目以及每個(gè)項(xiàng)目的高度。
.container { column-count: 3; background-color: #f7f7f7; width: 588px } .item { width: 180px; height: 180px; break-inside: avoid; background-color: #e5e5e5; margin-bottom: 20px; }
<div class="container"> <div class="item"> 1 </div> <div class="item"> 2 </div> <div class="item"> 3 </div> <div class="item"> 4 </div> </div>
對(duì)於這種情況,您可以將display: flex
與flex-wrap: wrap
和justify-content: space- Between
結(jié)合使用容器
.container { display: flex; flex-wrap: wrap; justify-content: space-between; background-color: #f7f7f7; width: 588px } .item { width: 180px; height: 180px; break-inside: avoid; background-color: #e5e5e5; margin-bottom: 20px; }
<div class="container"> <div class="item"> 1 </div> <div class="item"> 2 </div> <div class="item"> 3 </div> <div class="item"> 4 </div> </div>