css - 在网格中排列不同高度的元素

Question

所以我有各种不同尺寸的 UI 组件，我将它们放在一个页面中。我想将它们水平排列在一个网格中，其中每一行应等于该行中具有最大高度的组件的高度。每行没有固定的列数。组件应彼此相邻放置，而不会更改其尺寸，并且如果该行中的组件没有剩余空间，则应自动换行到下一行。

我尝试使用 bootstrap，但我必须为每个组件指定列宽，例如 col-xs-number，我不能这样做，因为我无法卡住一行中的元素数.

编辑:该应用程序使用 Bootstrap 版本 3，因此不能使用 V4。

这可能吗？

Answer 1

您可以在没有任何类型的 Bootstrap 的情况下做到这一点，只需对元素使用 display: inline-block。

下面是一个演示，我在一个容器 div 中添加了 12 个不同高度的元素，其中容器 div 的宽度在每次运行时都设置为一个随机值，以显示每次它如何以不同方式包装。

var heights = [100, 20, 80, 140, 65, 90, 30, 70, 130, 55, 75, 100];
for (var i = 0; i < heights.length; i++) {
  $('#x').append($('<div style="height:' + heights[i] + 'px"></div>'))
}
var w = Math.floor((Math.random() * 400) + 100);
$('#x').css("width", w + "px");

#x div {
  display: inline-block;
  vertical-align: text-top;
  width: 50px;
  background: green;
  margin: 10px;
}

#x {
  border: solid 1px #888
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<hr>
<div id="x"></div>
<hr>