如何用css底部的文本製作動態圖片框？

我想在CSS中製作一個動態圖片框，其底部有如下圖所示的文字。動態我的意思是，當我最小化窗口時，它將在不同的行上，而不是在一個長長的行。謝謝！如何用css底部的文本製作動態圖片框？

enter image description here

2013-11-23 Sagiv Goldberg

可能在這行文字的[對齊圖像重複下面每個圖像]（http://stackoverflow.com/questions/19747377/aligning-images-in-a-row-with-text-below-each-image） –

您可以使用帶有集中對齊的圖像和文本的浮動容器。當縮小視口尺寸時，不適合新寬度的圖像將移動到下方。

DEMO

HTML：

<ul class="container"> 
    <li><img src="" width="100" height="100" alt="" />Comment #1</li> 
    <li><img src="" width="100" height="100" alt="" />Comment #2</li> 
    <li><img src="" width="100" height="100" alt="" />Comment #3</li> 
    <li><img src="" width="100" height="100" alt="" />Comment #4</li> 
    <li><img src="" width="100" height="100" alt="" />Comment #5</li> 
    <li><img src="" width="100" height="100" alt="" />Comment #6</li> 
</ul>

CSS：

.container { 
    overflow:hidden; 
    list-style:none; 
} 

.container li { 
    float:left; 
    text-align:center; 
    margin:0.4em; 
} 

.container img { 
    display:block; 
}

來源

2013-11-23 20:18:49 brezanac