如何使div彼此相鄰並在其下浮動

Question

我有很多包含文本的div，我希望它們彼此相鄰並彼此下方對齊。

（我讀過一些東西，我應該為此做一個父母div，並給父母一個相對位置，給孩子一個絕對位置，但這對我不起作用）

但這是行不通的。

我發現這個布局顯示了我想要我做的事情

的HTML

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

的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

Answer 1

您所引用的站點使用一個名為Masonry的JavaScript包：

http://masonry.desandro.com/

僅靠CSS無法實現這種類型的網格布局，因此您需要Masonry軟件包。

Answer 2

http://jsfiddle.net/zqrjLz9d/1/到這里了。

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