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;
}​

Answer 2

你可以这样做：

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

CSS：

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

警告：这是一个“quick-n-dirty”修复，可能不适用于所有情况！！

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;
}

​</p>