您希望在響應式網格中顯示圖像，將它們水平居中並對齊他們留在每一行內，同時保持固定的距離。當瀏覽器視窗調整大小以適應每行的最大數量而不改變其大小時，圖像應自動換行。
僅使用 CSS 實現所需的佈局可能具有挑戰性。以下是利用媒體查詢依照視窗尺寸調整內部div 寬度的方法：
<code class="css">body {
margin: 10px 0;
}
.outer {
text-align: center;
}
.inner {
font-size: 0; /* fox inline gaps */
display: inline-block;
text-align: left;
}
.item {
font-size: 16px; /* reset font size */
display: inline-block;
margin: 5px; /* gutter */
}
.item img {
vertical-align: top;
}
@media (max-width: 551px) { /* ((100+5+5)x5)+1 */
.inner {
width: 440px; /* (100+5+5)x4 */
}
}
@media (max-width: 441px) {
.inner {
width: 330px;
}
}
@media (max-width: 331px) {
.inner {
width: 220px;
}
}
@media (max-width: 221px) {
.inner {
width: 110px;
}
}</code><code class="html"><div class="outer">
<div class="inner">
<div class="item"><img src="//dummyimage.com/100"></div>
<div class="item"><img src="//dummyimage.com/100"></div>
<div class="item"><img src="//dummyimage.com/100"></div>
<div class="item"><img src="//dummyimage.com/100"></div>
<div class="item"><img src="//dummyimage.com/100"></div>
</div>
</div></code>以上是如何在響應式網格中將容器居中並使子元素左對齊？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
