包含具有内嵌块显示的对象的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/