html - 创建具有相同高度的 div 元素（作为行）的响应式页面

Question

我正在尝试创建一个 webapp，它将动态生成行（每个行都有一个包装 div），这些行将具有相同的高度（基本上 - 如果我有 N 行，那么每个行的高度应该由'pageHeight / N'）。

请注意，元素应该是 div 类型，而不是带有内部 li 的 ul （这不是列表，我正在尝试编写正确的 HTML）。

解决方案必须依靠 CSS（JS 可以再次解决这个问题 - 这不是正确的方法），所以我尝试使用 display-table(external wrapper) 和 table-row(每行的包装器）但无法弄清楚。

提前致谢 ：）

Answer 1

您可以使用弹性盒：

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
}

.flex-item {
    -webkit-flex: 2 0 auto;
    flex: 2 0 auto;
}

检查这一点（使用# of flex items 减少元素的数量）： http ://bennettfeely.com/flexplorer/