如何僅使用 CSS 建立最後一行左對齊的居中網格？

居中網格，最後一行左對齊，沒有Flexbox

具有內聯塊顯示的CSS

考慮一個更簡單的自適應網格設計，具有最少的標記和CSS，使其具有多種實現和自訂功能。

對於居中的左對齊最後一行網格中的列根據瀏覽器寬度動態變化，CSS 可以在不使用 Flexbox 的情況下實現這種效果。

程式碼如下：

html, body {
    margin:0;
    padding:0;
}
#container{
    font-size:0;
    margin:0 auto;
    width:1000px;
}
.block {
    font-size:20px;
    width: 150px;
    height: 150px;
    margin:25px;
    background: gold;
    display:inline-block;
}

@media screen and (max-width: 430px) {
    #container{
        width:200px;
    }
}

@media screen and (min-width: 431px) and (max-width: 630px) {
   #container{
        width:400px;
    }
}
@media screen and (min-width: 631px) and (max-width: 830px) {
   #container{
        width:600px;
    }
}
@media screen and (min-width: 831px) and (max-width: 1030px) {
   #container{
        width:800px;
    }
}

<div>

此解決方案會自動調整列數和基於可用瀏覽器寬度的行，同時保持居中對齊和左對齊最後一行。相容於IE9，適合生產環境實施。

以上是如何僅使用 CSS 建立最後一行左對齊的居中網格？的詳細內容。更多資訊請關注PHP中文網其他相關文章！