我如何让divs漂浮在彼此的下方

I have a lot of divs with text in it, and I want them to nicely align next to each other and below each other.

我有很多divs，里面有文本，我想让它们彼此很好地排列在一起。

(I've read somehwere that I should make a parent div for these, and give the parent a relative position and the child a absolute position, but this didn't work for me)

(我读过一些文章，说我应该为这些设置一个父div，给父div设置一个相对位置，给子div设置一个绝对位置，但这对我来说行不通)

But it won't work.

但它不会工作。

I found this lay-out with shows exactly what I want mine to do

我发现这个布局展示了我想让我自己做的事情

HTML

HTML

<div class="block">
<!--<div class="blockboxgrid">-->
    <div class="blockbox">
        <h2>Title</h2>
        <p>
            Text
        </p>
    </div>
<!--</div>-->
</div>

CSS

CSS

/*.blockboxgrid{
   position:relative; <<< I saw this example while googling, to make the area where the box is in relative, and the box itself absolute. But this didn't work for me either.
}*/

.blockbox {
    /*position:absolute;*/
    background-color:#fff;
    border-radius: 4px;
    border:8px solid #ff6b6b;
    display: block;
    float: left;
    margin: 10px;
    width: 330px;

    color:#000;
    transition: all 0.5s ease;
}

JSFiddle

2 个解决方案

#1

The site your are referring to uses a JavaScript package called Masonry:

您所指的站点使用的是一个名为Masonry的JavaScript包:

http://masonry.desandro.com/

This type of grid layout cannot be achieved by CSS alone, so you need the Masonry package.

这种类型的网格布局不能仅通过CSS实现，因此需要使用砌体包。

#2

http://jsfiddle.net/zqrjLz9d/1/ Here you go.

http://jsfiddle.net/zqrjLz9d/1/给你。

.block { width:100%; height:auto; display: inline-block; float:left; }

.block {宽度:100%;高度:汽车;显示:inline-block;浮:左;}

#1