首頁 > web前端 > css教學 > 如何僅使用 CSS 左對齊居中內聯塊網格的最後一行?

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

Susan Sarandon
發布: 2024-12-02 20:57:12
原創
502 人瀏覽過

How to Left-Align the Last Row of a Centered Inline-Block Grid Using Only 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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板