1

さまざまなサイズを混在させることができるタイル (万歳タイル!) を使用してパティオ レイアウトを作成しています。これを行うには、<article>左にフロートする大量の があり、それらは自然に所定の位置に収まります。これは、私が垂直の形に夢中になるまでうまくいきます。

底に隙間があるのですが、どうやって埋めますか？いくつかのボックスを交換しようとしましたが、これは役に立ちませんでした。写真、コード、JSFiddle のリンクについては、以下を参照してください。

パティオのレイアウト

HTML

<div id="container">
    <article class="oneXone">
        hello world
    </article>

    <article class="oneXone">
        hello world
    </article>

    <article class="twoXone rhs">
        hello world
    </article>

    <article class="threeXone">
        hello world
    </article>

    <article class="oneXone rhs">
        hello world
    </article>

    <article class="oneXtwo">
        hello world
    </article>

    <article class="twoXone">
        hello world
    </article>

    <article class="oneXtwo rhs">
        hello world
    </article>

    <article class="oneXone">
        hello world
    </article>
</div>

CSS

#container { width: 480px; } 
article { float: left; margin: 0 8px 8px 0; padding: 5px; background: red; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.rhs { margin-right: 0; }
.floatRight { float: right; }
.oneXone { width: 114px; height: 114px; }
.twoXone { width: 236px; height: 114px; }
.threeXone { width: 358px; height: 114px; }
.oneXtwo { width: 114px; height: 236px; }
.oneXthree { width: 114px; height: 358px; }
.twoXtwo { width: 236px; height: 236px; }

オリジナルJSFiddle

JSFiddle の周りのボックスを入れ替えました

4

2 に答える 2

1

これをCSSに追加するだけです:

.oneXone:last-child {
    margin: -122px 0 0 122px;
    width: 114px;
}

これは、2 つのブロックが収まるjsFiddleです。

于 2013-07-17T12:44:07.653 に答える
0

オーケー、クリス・ニコルソン、これが私の答えです。

class「a」のような特定のタグを追加します。

<article class="oneXone a"> hello world </article>

次に、css：

.a{
    background-color: #1361aa;
    margin: -122px 0 0 122px;
    width: 236px;
}

http://jsfiddle.net/ykQBr/2/

于 2013-07-17T14:03:30.780 に答える