我正在尝试使用以下网格显示图像:
当它们位于左侧时,我无法将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的高度相同,然后在其中添加两个。 务必计算边距,填充和边框以适应高度。
请添加您的代码,以便我看到错误。