亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

CSS:使用列數(shù):3 時(shí),在 2 列呈現(xiàn) 4 個(gè)項(xiàng)目
P粉300541798
P粉300541798 2023-09-08 19:54:21
0
1
633

我想創(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>

P粉300541798
P粉300541798

全部回覆(1)
P粉281089485

對(duì)於這種情況,您可以將display: flexflex-wrap: wrapjustify-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>
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板