html - 删除div之间的差距？

Question

我有一个问题，我试图在谷歌上搜索但不幸的是我没有找到任何答案......

所以我想消除 DIV 之间的差距。我有一个小的 PHP 应用程序，它在一个 div 中显示用户图像和一些其他信息，DIV 宽度是 250px，DIV 高度是自动的，因为我不知道内容的长度，我也不知道 DIV 的数量，因为我从 MYSQL 中获取数据。

这是我的网页的屏幕截图:

我的代码是:

<style>
#det
{
width:250;
height:auto;
max-height:400px;
border-bottom:3px solid darkred;
background-color:white;
float:left;

padding:0px;
margin:0 auto;
border-radius:5px;
}

HTML

<div id='det'>
<img src='$user_image'><p>some text</p>
</div>

我想消除 DIV 之间的间隙，并向其展示杂志风格的外观。示例:masonry.desandro.com .目前我使用 float:left 但它不能正常工作，可能是因为我没有设置高度。无论如何都可以在不设置 div 高度的情况下解决这个问题？

谢谢

Answer 1

使用 flex 流体布局正确显示可变高度元素。

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  width: 179px;
  flex-grow: 0;
  flex-shrink: 0;
}

https://jsfiddle.net/w4pfxk2x/