消除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

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

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

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

https://jsfiddle.net/w4pfxk2x/

Answer 2

您应该使用display:inline-block;代替float:left;，您的问题将得到解决。

.det{
width:250;
height:auto;
max-height:400px;
border-bottom:3px solid darkred;
background-color:white;
display:inline-block;
padding:0px;
margin:0 auto;
border-radius:5px;
vertical-align:top
}

https://jsfiddle.net/IA7medd/haqkxkmb/