如何仅使用 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中文网其他相关文章！