不规则网格使用CSS

Question

我想显示使用下面的网格图像：

我有麻烦堆叠在彼此的顶部2个较小的缩略图时，他们是在左边，像第一行。

Answer 1

有一些存档方法，最简单的方法是在另一个div中添加两个较小的缩略图，这两个div的高度相同，然后在其中添加两个缩略图。 一定要计算边距，填充和边框以适应高度。

请添加您的代码，以便我可以看到最新的错误。

Answer 2

这是一种实现这种网格的方法。 （小提琴：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%; 
} 

我希望这是自我解释，并且易于定制。