css - 使用 CSS 在 html 中并排排列图像？

Question

我正在尝试实现一种使用 CSS 以特定布局显示我的图像的方法。我不知道如何使用 CSS 做到这一点。

我将两张小图片放在一起，一张高图片放在小图片的右边，高图片的高度等于小图片的高度。

要求的布局:

┌─────────────┬────────────┐
│ SMALL IMAGE │            │
├─────────────| TALL IMAGE |
│ SMALL IMAGE │            │
└─────────────┴────────────┘

我的代码在 jsfiddle 上:http://jsfiddle.net/VjfGS/

Answer 1

要以最少的标记更改获得所需的输出:http://jsfiddle.net/pratik136/AzyQG

HTML:

<div class ="image-section">
    <img class="tall" src ="http://static.guim.co.uk/sys-images/Lifeandhealth/Pix/pictures/2009/3/5/1236251569000/Six-gorgeous-plants-Close-001.jpg" width="60px" height="180px">
    <img src ="http://static.guim.co.uk/sys-images/Lifeandhealth/Pix/pictures/2009/3/5/1236251569000/Six-gorgeous-plants-Close-001.jpg" width="120px" height="90px"> 
    <img src ="http://static.guim.co.uk/sys-images/Lifeandhealth/Pix/pictures/2009/3/5/1236251569000/Six-gorgeous-plants-Close-001.jpg" width="120px" height="90px">
</div>
<div class ="image-section"></div>

CSS:

.tall {
    float: right;
}
img {
    float: left;
}
.image-section{
    width: 180px;
}​