輕鬆定位與雙高圖像比其他圖像

Question

我想打一個網頁，8張相似圖片：

img1 img2 img3 
img4 img5 img8 
img6 img7 img8 

正如你可以看到「img8」是雙一樣高，因爲所有其他圖像。

我該如何在CSS中做到這一點？

Answer 1

這只是基本的花車：

.wrap { 
    width: 150px; 
    height: 150px; 
} 

.small { 
    width: 50px; 
    height: 50px; 

    float: left; 
} 

.big { 
    width: 50px; 
    height: 100px; 

    float: right; 
} 

我假定一個HTML結構像下面這樣：

<div class="wrap"> 
    <div class="small">1</div> 
    <div class="small">2</div> 
    <div class="small">3</div> 

    <div class="small">4</div> 
    <div class="small">5</div> 

    <div class="big">8</div> 

    <div class="small">6</div> 
    <div class="small">7</div> 
</div> 

演示：http://jsfiddle.net/Eg8un/11/

Answer 2

正如斯科特所說，有不同的方法來做到這一點。如果圖像有特定的寬度和高度，然後看看我的例子適合你：

http://jsfiddle.net/J8TLV/

Answer 3

既然他們做了花車，我會做絕對的定位。 缺點更css。 優勢是源順序可以維護（圖像1-8在html中排序）。我擺脫了Frexuz's jsfiddle http://jsfiddle.net/J8TLV/3/。

我想我會更新上另一個（相關的）優勢，這些圖像可以在任何地方，在「行」和「列」網格定位，而不重新排序的圖像本身（如你需要與float ）。