CSS patio layout

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

ОК 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/

Answer 2

Просто добавьте в ваш CSS:

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

Вот jsFiddle с двумя блоками уместиться.