溢出时新列中div内的内容
溢出时新列中div内的内容
提问于 2016-08-24 21:26:12
我找不到让div垂直对齐的方法，它在overflow上换行到第二列……
我有一个固定高度的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的左边，我有一个可以选择的不同县的国家地图，当一个县被选择时，我想要在地图附近显示它的名称。这就是为什么我希望文本最靠近左边的原因。
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-08-24 21:38:31
更好的方法：
.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;
}Stack Overflow用户
发布于 2016-08-24 21:32:38
Bonjour =)您需要将div包装在另外两个div中，表示所需的列。这将提供类似如下的内容：
<div class="container" style="height: 70px; background-color: lightblue;">
<div class="column" style="float:left;">
<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>
<div class="column" style="float:left;">
<div style="width: 100px;">Picardie</div>
</div>
</div>像这样的东西应该可以工作，但是你可能需要在两个div上添加固定的宽度。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39124661
复制相关文章
相似问题