Question

我想制作一个包含8张图片的页面：

img1 img2 img3
img4 img5 img8
img6 img7 img8

正如你所看到的，“img8”的高度是所有其他图像的两倍。

我如何在css中执行此操作？

Answer 1

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

http://jsfiddle.net/J8TLV/

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.net/Eg8un/11/

Answer 3

因为他们做了花车，我会做绝对定位。缺点更多是css。优势是可以维护源订单（图片1-8在html中排序）。我切换了Frexuz的jsfiddle http://jsfiddle.net/J8TLV/3/。

我以为我会更新 另一个（相关的）优势，这些图片可以定位在＆＃34; row＆＃34;和＆＃34;列＆＃34;网格没有重新排序图像本身（正如您需要使用float）。

使用双倍高度轻松定位图像比其他图像

3 个答案: