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在旁边和下面浮动

2 个答案: