溢出时新列中的div内容

Question

我找不到一种方法来使div垂直对齐，并在溢出时包装到第二列...

我有一个具有固定高度的div，在内部有数量动态变化的文本，每个文本都包裹在一个具有固定宽度的div中。

我想以垂直对齐方式显示文本。如果没有足够的空间，则应使用第二列。我尝试了float和display：inline-block但该元素并不位于彼此之间。

我认为通过图片更容易理解：

一个纯CSS解决方案将是最好的！

这是问题的基本html代码：

<div class="container" style="height: 70px; background-color: lightblue;">
  <div style="width: 100px;">Alsace</div>
  <div style="width: 100px;">Bretagne</div>
  <div style="width: 100px;">Centre</div>
  <div style="width: 100px;">Lorraine</div>
  <div style="width: 100px;">Picardie</div>
</div>

---

上下文：在主div的左侧，我有一张可以选择不同县的国家地图，当选择一个县时，我想在地图附近显示其名称。这就是为什么我要使文本最接近左侧。

Answer 1

更好的方法：

.container {
    display: flex;
    flex-flow: column wrap;
}

感谢@Roberrrt

这可以用 display: flex;

演示：https : //jsfiddle.net/88p36j74/

您将包装器高度设置为“项目高度” x“垂直项目数”。

.container {
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  flex-wrap: wrap;
  height: 250px;/* 5 items x 50px = 250px*/
}
.container div {
  height: 50px;
  width: 100px;
  background: red;
}