CSS html 网格布局

randomKek 发表于 Dev

随机数

我正在尝试创建这样的网格：

所有物品的高度都可能不同
最高高度的项目定义行的高度
如果可能的话，我不想将每一行都包装在一个列 div 中，以使我的代码更清晰。

我尝试过的：

使用浮点数，但这是不可能的，因为我仍然必须清除每一行

谢谢

内纳德·弗拉卡尔

您可以使用 Flexbox 创建此布局。您只需要flex-wrap: wrap在 flex-container 上进行设置，以便 flex-items 中断到新行，最高的项目将设置该行的高度。

.content {
  display: flex;
  flex-wrap: wrap;
}
.content > div {
  background: red;
  flex: 0 0 calc(33.33% - 20px);
  margin: 10px;
}

<div class="content">
  <div style="height: 100px">Div</div>
  <div style="height: 150px">Div</div>
  <div style="height: 90px">Div</div>
  <div style="height: 80px">Div</div>
  <div style="height: 70px">Div</div>
  <div style="height: 120px">Div</div>
  <div style="height: 100px">Div</div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。