html - CSS 露台布局

Question

我正在创建一个带有瓷砖(万岁瓷砖!)的露台布局，它允许混合不同尺寸的瓷砖。为此，我只需要加载 <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; }

Original JSFiddle

Swapped boxes around JSFiddle

Answer 1

只需将此添加到您的 CSS:

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

这是一个 jsFiddle 里面放了两个方 block 。