我有一些数据(框)应该像画廊元素一样显示(就像在任何购物网站中一样)，问题是每个框的高度不一样，因为它的内容，每行有 4 个元素(框)，假设如果第一个盒子中的一个高度为 300px 而所有其他盒子的高度为 250px 那么下一个中的下一个元素从第一行的最大高度结束开始，我不想要这样，我不想要这些空白空间，每个盒子下一行应显示在第一行的框下
这是我的代码
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
width: 400px;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
width: 122px;
margin: 0 10px 10px 0;
float: left;
padding: 15px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2flex item 2flex item 2flex item 2</div>
<div class="flex-item">flex item 3</div>
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div class="flex-item">flex item 3</div>
</div>
</body>
</html>
最佳答案
据我所知，您正在寻找的效果称为 Masonry 或 Pinterest 效果。 This is a good plugin for it.
这是您实现砌体的代码:https://jsfiddle.net/jwjkt933/
用于初始化砌体的 jQuery 代码:
(function($) {
$('.flex-container').masonry({
columnWidth: 152,
gutter: 10,
itemSelector: '.flex-item'
});
})(jQuery);
这个例子也需要 jQuery，尽管你也可以用纯 JS 初始化砌体。
关于html - 显示画廊元素等元素时的定位问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43378281/