溢出时新列中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;完成

但是：Kua zxsw指出

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

https://jsfiddle.net/88p36j74/

Answer 2

你可以使用

.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;
}

。 1

column-count

.container {
  height: 90px;
  background-color: lightblue;
  column-count: 2;
  column-fill: auto;
}

.container>div { width: 100px; height: 20px; }

1

<div class="container">
  <div>Alsace</div>
  <div>Bretagne</div>
  <div>Centre</div>
  <div>Lorraine</div>
  <div>Picardie</div>
</div>

Answer 3

Bonjour =）你需要将div包装在另外两个div中，代表你想要的列。这会给出类似的东西：

column-count support

这样的东西应该工作，你可能需要在两个div上添加固定宽度。