消除div之间的差距？

Question

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

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:

And my code is:

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

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?

Thanks

Answer 1

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/

Answer 2

You should use display:inline-block; instead of float:left; and your problem will be fixed.

.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/