css - CSSを使用した不規則なグリッド

Question

次のグリッドを使用して画像を表示しようとしています。

最初の行のように、左側にある2つの小さなサムネイルを積み重ねるのに問題があります。

Answer 1

この種のグリッドを実現する方法を次に示します。(フィドル: http://jsfiddle.net/joplomacedo/ygtYx/ )

HTML...

<div class="row">
    <div class="col narrow stack">
        <div>img goes here...</div>
        <div>img goes here...</div>
    </div>
    <div class="col large">img goes here...</div>
    <div class="col narrow">img goes here...</div>
</div>

<div class="row">
    <div class="col narrow">img goes here...</div>
    <div class="col large">img goes here...</div>
    <div class="col narrow stack">
        <div>img goes here...</div>
        <div>img goes here...</div>
    </div>
</div>
​
​

CSS...

.row,
.col,
.stack > div {
    /* 
      I usually just apply 
      this to all elements using 
      the * selector. You might not
      want to, so I put it here 
     */
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.row:after {
    content:"";
    display: table;
    clear: both;
}

.col {
    float: left
}

.col.narrow {
    width: 25%;
}

.col.large {
    width: 50%;
}

.stack > div {
    height: 50%;
}

自明で、カスタマイズしやすいことを願っています。

Answer 2

それをアーカイブする方法がいくつかあります。最も簡単な方法は、他の div と同じ高さを持つ 1 つの別の div に両方の小さなサムネイルを追加し、その中に両方を追加することです。高さに合わせてマージン、パディング、ボーダーを計算してください。

コードを追加して、何が問題なのかを確認してください。