1

I want to make a grid have certain columns staggered, like this:

staggered columns

Currently I can only get the 4th element to line up so it's below 2 (with a clear: left;). This can be seen in a fiddle.

I'm not sure if this is possible without absolute positioning or at best relative position to the #wrapper element. I'm not totally against ideas that need javascript, because in fact the above jsFiddle is a very simplified version of a layout that relies on jQuery to display properly.

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;
}
4

1 回答 1

3

建议演示。

我已将您的部分划分为“列”，以便更轻松地工作。你可以把它分成更多<div>，这样你就可以用row => column. 如果您更喜欢它作为表格，我可以将演示编辑到它，但我认为这对于您的示例来说已经足够了。

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

于 2013-05-17T09:13:52.233 回答