html - CSS 露台布局

Question

我正在创建一个带有瓷砖（万岁瓷砖！）的露台布局，它允许不同尺寸的混合。为此，我只需将<article>'s 的负载向左浮动，它们自然会落位。这很好用，直到我开始喜欢垂直形状。

我的底部有一个缺口，我该如何填补它？我尝试交换一些盒子，但这没有帮助。请参阅下面的图片、代码和 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 周围的交换框

Answer 1

只需将其添加到您的CSS中：

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

这是一个jsFiddle，里面有两个块。

Answer 2

好的Chris Nicholson，根据您的要求，这是我的回答。

添加一个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/