如何垂直错开这些HTML元素？

Question

我想让网格中的某些列交错，如下所示：

目前我只能将第4个元素排成一行，所以它低于2（带有clear: left;）。的 This can be seen in a fiddle

我不确定这是否可能没有绝对定位或最好相对于#wrapper元素的位置。我并不完全反对需要javascript的想法，因为实际上上面的jsFiddle是一个非常简化的布局版本，它依赖于jQuery来正确显示。

HTML

<div id="wrapper">
    <section>
        <p>1</p>
    </section>

    <section id="staggered">
        <p>2</p>
    </section>

    <section>
        <p>3</p>
    </section>

    <section id="new-row">
        <p>4</p>
    </section>

    <section>
        <p>5</p>
    </section>

    <section>
        <p>6</p>
    </section>
</div>

CSS

section {
    width: 100px;
    height: 50px;
    margin: 10px;
    background: #FFCC66;
    float: left;
}

section#staggered {
    margin-top: 35px;
}

section#new-row {
    clear: left;
}

#wrapper {
    width: 360px;
}

Answer 1

建议 demo 。

我已将您的部分划分为“列”，以便更轻松地工作。您可以将其划分为更多<div>，以便您可以使用row => column指定“表格”。如果你喜欢它作为一个表格，我可以编辑它的演示，但我认为这对你的例子来说已经足够了。

仅使用“列”的原因是因为如果要将其定义为容器表，则必须将lower类添加到两个div，作为列，包含2和{{1 }}