使用CSS的不规则网格

时间:2012-10-07 23:28:56

标签: css layout grid

我正在尝试使用以下网格显示图像:

enter image description here

当它们位于左侧时,我无法将2个较小的缩略图堆叠在一起,就像在第一行中一样。

2 个答案:

答案 0 :(得分: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%;
}

我希望它是自我解释的,并且易于定制。

答案 1 :(得分:0)

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

请添加您的代码,以便我看到错误。