如何为包含具有内联块显示的对象的 div 设置固定高度和自动宽度？

Question

通常，如果您有一个具有固定宽度和自动高度的 div，并且您在其中添加具有定义宽度和高度的对象以及内联块显示，它们会在 div 中并排添加，直到它用完宽度并且高度会自动增加，以便它们可以容纳在下面。

我想找到一种方法来反转此功能。具有固定高度和自动宽度的 div。随着对象（具有定义的宽度和高度以及内联块显示）被添加到其中，它们被添加到彼此下方，直到 div 用完高度，然后宽度自动增加以从右上角容纳它们。我尝试了下面的示例，但没有成功。

css（没用）

.div {

    height:300px;
    width:auto;

}

宽度没有增加，导致 div 垂直溢出。我知道这些天我想做的事情很常见，尽管我不记得我最后一次看到它是在哪里。也许它需要javascript。我对任何事情都持开放态度。任何人都可以帮忙吗？

Answer 1

这是 flexbox 派上用场的一个很好的例子：

.testbox {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  height: 300px;
  background: chocolate;
}

.item {
  width: 100px;
  height: 120px;
  margin: 15px;
  background: beige;
}

<div class="testbox">
  <span class="item">1 Lorem ipsum dolor sit amet.</span>
  <span class="item">2 Soluta officia aut dolorem, doloribus!</span>
  <span class="item">3 Accusamus et quibusdam aliquid ullam.</span>
  <span class="item">4 Magnam fugit temporibus, minus ut?</span>
  <span class="item">5 Laborum corporis quidem eum esse.</span>
</div>

Answer 2

不需要 Javascript，我们可以使用 CSS 列来做到这一点。

在您的父元素上，设置最大宽度，并指定列宽（您可能需要包括供应商前缀）

.parent {
   width: 300px;
  -moz-column-width: 100px;
  -webkit-column-width: 100px;
  column-width: 100px;
  height: 200px;
}

示例 jsfiddle：

https://jsfiddle.net/3s8007kb/