消除div之间的差距？答案

【问题标题】：remove gap between div?消除div之间的差距？
【发布时间】：2016-05-23 01:30:30
【问题描述】：

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

所以我想消除 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 高度的情况下解决这个问题？

谢谢

【问题讨论】：

差距在哪里？我看不出有什么缝隙。详细解释并展示图像如何使您的前端看起来像
ID 应该是唯一的（使用类代替），我认为你需要这样的东西：masonry.desandro.com
是的，你是对的 (@nevermind) 但我不能使用不同的 id，因为我从 mysql 获取数据
或者，由于您在后端使用 php，您可以创建每行 3 张图片的“行”（例如）。在这种情况下，您可以仅使用 css 解决此问题....
实际上我不能使用行有没有其他使用javascript的方法？

标签： html css

【解决方案1】：

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

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

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

https://jsfiddle.net/w4pfxk2x/

【讨论】：

【解决方案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/

【讨论】：

它解决了我 50% 的问题，但差距仍然存在。我需要这样的东西 masonry.desandro.com
@Joe，下载该脚本并使用它，然后...据我所知，这是唯一的解决方案（或者制作这样的脚本，这并不容易）。跨度>
只用样式是不可能的，所以你需要下载并使用准备好的脚本，对不起，我一开始没理解你。