訂購<img>標籤都有效，每

Question

行

4個圖像的塊佈局我有20個<img>標籤都有效：

<img src="/image/1.jpg"/> 
<img src="/image/2.jpg"/> 
<img src="/image/3.jpg"/> 
<img src="/image/....jpg"/> 
<img src="/image/N.jpg"/> 

如何訂購在每行4個圖像的塊佈局這些照片？ 只有有效div，沒有表！

實施例：http://new.music.yahoo.com/videos/charts/

Answer 1

如果圖像大小相同，只需爲容器創建一個DIV，然後將所有圖像浮起並設置DIV的合適寬度。比方說，每個圖像是100px的寬度創建如下：

<div class="container"> 
    <div class="image-block"> 
     <img src="img1.jpg"> 
     <span>Here goes some text</span> 
    </div> 
    .... 
</div> 

CSS

div.container { 
    width: 400px; 
} 

div.container .image-block { 
    float: left; 
    width: 100px; 
    /* you may use overflow: hiiden; 
    if the text or image is wider 
    than the box width */ 
} 

div.container .image-block span { 
    /* styling the text */ 
} 

Answer 2

應用樣式float:left到每個圖像，並減少在div寬度，直到它包含每行4個圖像。

Answer 3

此外，以infintys答案，你應該做到以下幾點，因爲你需要在div浮動，而不是圖像。

div.container { 
    width: 25%; 
    float: left; 
}