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 中添加两个较小的缩略图，这些缩略图与另一个 div 具有相同的高度，然后将两者都添加到其中。请务必计算边距、内边距和边框以适应高度。

请添加您的代码，以便我可以看到有什么问题。