html - 包装在单个容器中的不同行中具有相同高度的动态列

Question

请检查下面的代码和问题

.container_12 {
  overflow: hidden;
}
.grid_4 {
  margin: 0;
  padding: 0;
  border: 0;
  float: left;
}
.container_12 .grid_4 {
  width: 33.333333333333336%;
}

<div class="container_12">
  <div class="grid_4">Div 1</div>
  <div class="grid_4">Div 2 with extra content</div>
  <div class="grid_4">Div 3 with extra content</div>
  <div class="grid_4">Div 4</div>
  <div class="grid_4">Div 5 with extra content</div>
</div>

在上面的代码中，grid_4连续对齐了3个，剩下的会换行到下一行。这些grid_4是动态生成的，甚至可以删除。例如，如果我删除 Div 4 并将 Div 5 移动到 Div 4 的位置，如下面的代码

<div class="container_12">
          <div class="grid_4">Div 1</div>
          <div class="grid_4">Div 2 with extra content</div>
          <div class="grid_4">Div 3 with extra content</div>          
          <div class="grid_4">Div 5 with extra content</div>
        </div>

这些 div 具有不同的内容和不同的高度。所以问题是我如何保持行高和每行 12/4 = 3 列？这可以通过 jquery 通过为元素设置高度来实现。但是有没有其他可能的方法通过仅使用 CSS [没有 flexbox - 因为移动兼容性] 来实现这一点

提前致谢。

Answer 1

CSS3 Flexbox 正是为此引入的。它可以在不使用任何框架的情况下通过简化代码和提高可读性来处理响应式和复杂的布局。它还适用于所有最新的浏览器，包括 IE11，部分支持 IE9、IE10。 here is the CanIUse link

您可以通过以下代码轻松实现您的解决方案:

.container_12 {
  display: flex; //initialises flexbox
  flex-wrap: wrap; //tells it to wrap overflowing contents
}
.grid_4 { 
  flex: 0 0 33%;
}

就这么简单! Codepen here

更好的是，这涵盖了您的动态高度和宽度要求。您还可以通过 flex property (flex-grow、flex-shrink、flex-basis 的简写)了解更多关于“调整”div 尺寸的信息