轻松定位图像，其高度是其他图像的两倍

Question

我想制作一个包含 8 个图像的页面，如下所示：

img1 img2 img3
img4 img5 img8
img6 img7 img8

如您所见，“img8”的高度是所有其他图像的两倍。

我如何在CSS中做到这一点？

Answer 1

正如斯科特所说，有不同的方法可以做到这一点。如果您的图像具有特定的宽度和高度，请查看我的示例是否适合您：

http://jsfiddle.net/J8TLV/< /a>

Answer 2

这只是基本的浮动：

.wrap {
    width: 150px;
    height: 150px;
}

.small {
    width: 50px;
    height: 50px;

    float: left;
}

.big {
    width: 50px;
    height: 100px;

    float: right;
}

我假设了如下所示的 HTML 结构：

<div class="wrap">
  <div class="small">1</div>
  <div class="small">2</div>
  <div class="small">3</div>

  <div class="small">4</div>
  <div class="small">5</div>

  <div class="big">8</div>

  <div class="small">6</div>
  <div class="small">7</div>
</div>

演示：http://jsfiddle。净/Eg8un/11/

Answer 3

既然他们做了浮动，我就做绝对定位。 缺点是更多的CSS。 优点是可以保持源顺序（图像 1-8 在 html 中如此排序）。我关闭了 Frexuz 的 jsfiddle http://jsfiddle.net/J8TLV/3/。

我想我会更新另一个（相关）优势，即图像可以放置在“行”和“列”网格中的任何位置，而无需重新排序图像本身（如你需要使用float）。