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

【问题标题】：How do I get the divs to float next to, and below each other如何让 div 浮动在彼此旁边和下方
【发布时间】：2015-04-08 07:01:00
【问题描述】：

我有很多带有文本的 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

【问题讨论】：

你可以更好地使用
- 标签并将所有 div 作为子元素放在每个
- 标签内。
@frebinfrancis 是的，这会起作用 - 这里的方法相同：stackoverflow.com/a/8896548/1163786 - 这是 isotope.metafizzy.co 或 masonry.desandro.com 的布局工作。仅靠 CSS 无法真正解决，需要重新计算网格。
Float unordered lists (UL) next to one another, and stack them at the bottom of each other, with no margins or spaces的可能重复

标签： html css alignment css-float positioning

【解决方案1】：

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

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

【讨论】：

我的块类将我的网站分成多个部分。主页、关于、联系方式等。我应该从问题中删除它。还是谢谢。

【解决方案2】：

您所指的网站使用了一个名为 Masonry 的 JavaScript 包：

http://masonry.desandro.com/

这种网格布局单靠 CSS 是无法实现的，所以需要砌体包。

【讨论】：

我查看了他的代码，看到了“masonry”这个词，但我不知道它是什么。这会解决我所有的问题吗？
如果您想要一个类似于您提到的网格，Masonry 可能会这样做。我认为您需要设置它并尝试一下以确保，但值得付出努力。
我工作过……有点。我需要调整我的利润，但我可以稍后再做。感谢您提供这个插件。