Div列与高度完全填充

Question

我有div（容器）。在其中我将div放在y上，而不是正常排列在x上。

我会附上一张图片来解释一下：

我尝试display: table-cell float，但没有解决方法。怎么办？

我没有固定数量的列，我希望它们在height上填充，并在width上向右移动直到达到#mydiv宽度限制，然后{{ 1}}。

display: none

Answer 1

flexbox在这里非常有用，您可以将flex-direction设置为column以使其垂直。有关演示，请参阅下面的代码段。

您可以将.box的宽度和高度设置为任意大小，它会尝试填充空间。详细了解flexbox属性以及如何在CSS Tricks使用它。

#mydiv {
  border: 1px solid blue;
  display: flex;
  align-content: flex-start;
  flex-flow: column wrap;
  height: 100vh;
}

.box {
  border: 1px solid red;
  width: 50px;
  height: 50px;
}

<div id="mydiv">
   <div class="box">1</div>
   <div class="box">2</div>
   <div class="box">3</div>
   <div class="box">4</div>
   <div class="box">5</div>
   <div class="box">6</div>
   <div class="box">7</div>
   <div class="box">8</div>
</div>

Answer 2

您是否可以使用column-count实现此目的？

这通常是我会用的：

.prod_ul {
    column-count: 3;
    -moz-column-count: 3;
    -webkit-column-count: 3;
}

将该样式提供给您的父div或ul，并按照您的预期创建列。