32
我有X個圖像（所有高度和寬度都相同），並且我希望將它們顯示在網頁上。但是，當瀏覽器調整大小時，我希望使頁面自動顯示連續圖像的最大數量（不調整圖像大小），並顯示圖像間隔固定的距離。居中對齊容器並左對齊子元素
此外，圖像應該組合在頁面的中心，並一個接一個地顯示。
例如 當瀏覽器窗口的寬度足以在一行上顯示3個圖像時，它們應顯示如下。
每行3個圖像按照固定的距離分組在一起，位於頁面的中間，一個接一個。 
而且，如果瀏覽器變得更寬，所以4個圖像可以顯示在一行上，他們應該像這樣顯示。
每行4個圖像（不調整圖像大小），在頁面中間一個接一個地分組固定在一起。 
到目前爲止，我已經寫了下面的代碼：
HTML
<div class="outer-div">
<div class="inner-div">
<div class="image-div"><img src="images/1.png"></div>
<div class="image-div"><img src="images/2.png"></div>
<div class="image-div"><img src="images/3.png"></div>
<div class="image-div"><img src="images/4.png"></div>
<div class="image-div"><img src="images/5.png"></div>
</div>
</div>
CSS
img {
height: 200px;
width: 200px;
padding: 10px;
}
.image-div {
display: inline;
}
.outer-div {
text-align: center;
width: 100%;
}
.inner-div {
text-align: left;
display: inline;
}
，因此圖像與10px的填充內嵌顯示在一個div（inner-div）裏面集中在外部div。圖像與內部div內的左側文本對齊。
但問題是如下它們顯示：
，喜歡如下當瀏覽器變寬 
可有人請告訴我如何顯示喜歡的圖片第一組圖像？
即一個接一個地將每行圖像的最大數量（在不改變圖像大小的情況下）在頁面的中心分組在一起，固定距離（包裹）。
檢查這支筆，不是最好的解決辦法，但你可以使用它。 http://codepen.io/anon/pen/MaOrWp – makshh
這可能有助於https://jsfiddle.net/9deLmbps/3/ – Lahori
這是一個非常類似（如果不是相同的）問題，幾個方法http：// stackoverflow.com/q/19527104/1811992 –