如何让 div 浮动在彼此旁边和下方

Question

我有很多 div 里面有文字，我希望它们可以很好地并排对齐，也可以相互对齐。

（我读过一些书说我应该为这些设置父级 div，并给父级一个相对位置，给子级一个绝对位置，但这对我不起作用）

但是不行。

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

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无法实现这种网格布局，所以需要砌体包.

Answer 2

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

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

如何让 div 浮动在彼此旁边和下方

How do I get the divs to float next to, and below each other

html

css

positioning

alignment

css-float