使用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中排列並排圖像？

回答

相關問題