如何僅使用 CSS 左對齊居中內聯塊網格的最後一行？

居中元素網格中的最後一行左對齊

這個問題解決了將內聯塊元素網格的最後一行向左對齊的挑戰，同時保持整個網格的居中對齊。用戶專門尋找不涉及 Flexbox 或其他標記的 CSS 解決方案。

這裡有一個滿足要求的自適應網格解決方案：

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>

在此解決方案中，內聯塊元素放置在具有固定寬度的容器內。當瀏覽器視窗的寬度改變時，容器會調整大小，同時保持其居中位置。當容器的寬度變得太窄而無法容納所有元素時，它們開始換行到下一行。由於內聯區塊元素的預設行為，最後一行自動左對齊。

演示連結：

[自適應網格演示]（在此處插入演示連結)

透過調整瀏覽器視窗的大小，您可以觀察網格如何適應以及最後一行在所有內容中保持左對齊場景。

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