消除div之间的差距? [英] remove gap between div?

问题描述

我有一个问题，我试图在Google上搜索，但很遗憾，我没有找到任何答案...

I have a question, I tried to search on google but unluckily I didn't find any answer...

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

So i want to remove gap between DIVs. I have a small PHP application which shows users images in a div with some other info, DIV width is 250px and DIV height is auto because I don't know the length of content and I also didn't know the number of the DIV because i fetch data from MYSQL.

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

Here is a screen-shoot of my web page:

我的代码是:

<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高度吗?

I want to remove gap between DIV and show it how a magazine-style look like. Example: masonry.desandro.com. Currently i used float:left but it's not working properly and maybe because I didn't set height. Is there anyway to solve this without set div height?

谢谢

推荐答案

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

Use flex fluid layout for showing variable height elements properly.

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

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

https://jsfiddle.net/w4pfxk2x/

这篇关于消除div之间的差距?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！