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

Question

我正在尝试使用CSS实现一种在特定布局中显示图像的方法。我无法想象如何使用CSS做到这一点。

我将两张小图片放在彼此的顶部，一张高的图片放在右边的小图片旁边，高大的图片高度等于小照片。

所需的布局：

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

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

Answer 1

你可以这样做：

演示：http://jsfiddle.net/5kxNm/

CSS：

.tall {
    float: none;
}
img {
    float: left;
    clear: left;
}​

警告：这是一个“快速肮脏”的修复程序，可能并不适用于所有情况!!

Answer 2

使用最少的标记更改来实现所需的输出：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;
}​

Answer 3

例如，像http://jsfiddle.net/VjfGS/4/

一样

<div class ="image-section">
    <div class="left">
        <img> 
        <img>
    </div>
    <img class="tall">
</div>
<div class ="image-section"></div>
​.tall {
    float:left;
}
.left{
    float: left;
}
.left img{
    display:block;
}

Answer 4

这就行了

http://jsfiddle.net/VjfGS/18/

<div class ="image-section">
    <div class="smallDiv">    
         <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"> <br/>
          <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>
    <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">
</div>
<div class ="image-section"></div>

.smallDiv{
    float:left;
}