卡列最小卡

Question

我使用媒体查询来响应地显示卡片列。但是，在开始填充下一列（从左到右）之前，每列中至少有2张卡片。

如果不显示至少（2 *列-1）卡，则会导致空白列。

有解决方法吗？我希望在填充第二行之前填充所有列。

https://codepen.io/Vgoose/pen/wjgKPP

<div class="card-columns">
  <div class="card">
    <img class="card-img-top img-fluid" src="..." alt="Card image cap">

  </div>
  <div class="card">
    <img class="card-img-top img-fluid" src="..." alt="Card image cap">

  </div>
  <div class="card">
    <img class="card-img-top img-fluid" src="..." alt="Card image cap">

  </div>
  <div class="card">
    <img class="card-img-top img-fluid" src="..." alt="Card image cap">

  </div>
  <div class="card">
    <img class="card-img-top img-fluid" src="..." alt="Card image cap">

  </div>
</div>

用于造型：

.card-columns {
    column-count: 1;
}
}
@media screen and (min-width: 576px) {
  div.card-columns {
    column-count: 2;
  }
}
@media screen and (min-width: 768px) {
  div.card-columns {
    column-count: 3;
  }
}
@media screen and (min-width: 992px) {
  div.card-columns {
    column-count: 4;
  }
}

Answer 1

我担心columns-count不适用于这种情况，因为首先填充列的整个高度。基本上它是为文本列创建的。这就是为什么它不适合你 - 如果你增加.card-column高度的值，.cards的划分会更加不平衡。

在这种情况下，我建议在不同窗口宽度上使用.card宽度，.card上的display: inline-block例如（最简单的一个）。

＆＃13;

＆＃13;

.card-columns {
/*   display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; */
  border: 1px solid #f00;
  font-size: 0;
}
.card {
  width: 100%;
  display: inline-block;
  border: 1px solid #000;
  box-sizing: border-box;
  font-size: 16px;
}
@media screen and (min-width: 576px) {
  .card {
    width: 50%;
  }
}
@media screen and (min-width: 768px) {
  .card {
    width: 33.33%
  }
}
@media screen and (min-width: 992px) {
  .card {
    width: 25%;
  }
}

＆＃13;

<div class="card-columns">
  <div class="card">
    <img class="card-img-top img-fluid" src="..." alt="Card image cap">
    
  </div>
  <div class="card">
    <img class="card-img-top img-fluid" src="..." alt="Card image cap">
    
  </div>
  <div class="card">
    <img class="card-img-top img-fluid" src="..." alt="Card image cap">
    
  </div>
  <div class="card">
    <img class="card-img-top img-fluid" src="..." alt="Card image cap">
    
  </div>
  <div class="card">
    <img class="card-img-top img-fluid" src="..." alt="Card image cap">
    
  </div>

  
</div>

＆＃13;

＆＃13;

＆＃13;

当然，还有很多其他选项，比如flex或css网格，这都取决于你的目标。