1

次のように、グリッドに特定の列をずらして配置したいと考えています。

千鳥柱

現在、4番目の要素しか並べることができないため、2未満です（ 付きclear: left;）。これは fiddle で確認できます。

#wrapperこれが絶対配置なしで可能か、要素に対するせいぜい相対位置で可能かどうかはわかりません。実際、上記の jsFiddle は、適切に表示するためにjavascript依存するレイアウトの非常に単純化されたバージョンであるため、が必要なアイデアに完全に反対しているわけではありません。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;
}
4

1 に答える 1

3

提案されたデモ。

セクションを「列」に分割して、より簡単に作業できるようにしました。<div>で「テーブル」を指定できるように、さらに分割することもできますrow => column。表として使用したい場合は、デモを編集できますが、あなたの例にはこれで十分だと思いました.

「列」のみを使用する理由は、コンテナー テーブルとして定義する場合、lower両方の div にクラスを追加し、列として機能し、含まれているもの2と5

于 2013-05-17T09:13:52.233 に答える