我想創(chuàng)建一個(gè) 3 列的磚石布局來渲染具有相同寬度但不同高度的項(xiàng)目,但是當(dāng)我嘗試下面的代碼時(shí),我看到第三列是空的,這看起來有點(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>