Question

我有一个包含七个或更多子div的父div。我需要显示4个子div ...其余的将包装在后续的四个div中。我需要所有子div都具有相同的高度，相对于共享同一行的其他三个子div。父div也是响应式的，因此当视口较小时，它最终可能会显示2个子div的行。

display：inline-block没有解决这个问题（不等的子div高度），并且display：table-cell不允许子div包装成后续行。我怎样才能实现目标？

这是一个非常基本的小问题：https://jsfiddle.net/hockey2112/3r2pL25v/

<div class="table">
<div class="tablecell">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="tablecell">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. This div has a little more information in it, and therefore it will be taller than the other divs.</div>
<div class="tablecell">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="tablecell">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="tablecell">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="tablecell">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="tablecell">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>


.table {font-size: 9px;}

.tablecell {display: inline-block;
width: 23%; border: 1px solid #ff0000; vertical-align: top;}

Answer 1

扩展我对flexbox的使用的评论：

使用flexbox，自动完成沿横轴对齐元素的高度，因为justify-content的默认值为stretch。

您所要做的就是在容器元素上设置display: flex;。您可能还想添加flex-wrap: wrap;，以便子元素包装成多行。

此外，默认flex-direction为row，因此您无需指定。{/ p>

总而言之，您需要使用以下CSS样式：

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

.item {
  flex: 1 0 23%; /* grow = 1, shrink = 0, basis = 23% */
}

儿童div具有相同的高度和包裹

1 个答案: