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

我想实现一种方式来显示我的图像在使用CSS的特定布局。我不知道如何使用CSS来做到这一点。使用CSS在HTML中排列并排图像？

我把两个小图像放在彼此的顶部，一个高的小图像放在小图像的旁边，高大的图像的高度等于小照片。

所需的布局：

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

我的代码是对的jsfiddle这里：http://jsfiddle.net/VjfGS/

来源

2012-08-03 user1551482

为了实现用最少的标记变更所需的输出：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; 
}

output

来源

2012-08-03 13:33:32 bPratik

例如，像这样的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; 
}

来源

2012-08-03 13:19:36

你可以像这样做：

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

CSS：

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

警告：这是一个“快速正脏”修复并在所有情况下可能无法正常工作！

来源

2012-08-03 13:20:21

那脏;考虑其他答案更好的方法 – 2012-08-03 13:21:43

是的，但它不需要任何标记更改。 – 2012-08-03 13:22:22

这会做到这一点

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

来源

2012-08-03 13:20:23 Liam

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

回答

相关问题