首页 >web前端 >css教程 >如何在没有 Flexbox 的情况下左对齐居中内联块网格中的最后一行?

如何在没有 Flexbox 的情况下左对齐居中内联块网格中的最后一行?

DDD
DDD原创
2024-12-19 14:33:09609浏览

How to Left-Align the Last Row in a Centered Inline-Block Grid without Flexbox?

使用显示内联块在元素居中网格中左对齐最后一行

目标是创建居中的块网格,同时确保最后一行左对齐。无需借助 Flexbox 或添加额外的填充 div,这里有一个仅 CSS 的解决方案:

使用 Display Inline-Block 的自适应网格

<pre class="brush:php;toolbar:false">margin:0;
padding:0;

}

容器{

font-size:0;
margin:0 auto;
width:1000px;

}
.block {

font-size:20px;
width: 150px;
height: 150px;
margin:25px;
background: gold;
display:inline-block;

}

@media 屏幕和(最大宽度:430px){

#container{
    width:200px;
}

}

@media 屏幕和(最小宽度:431px)和(最大宽度:630px){
#container{

    width:400px;
}

}
@media 屏幕和(最小宽度: 631px) 和 (最大宽度: 830px) {
#container{

    width:600px;
}

}
@media 屏幕和 (最小宽度: 831px) 和 (最大宽度: 1030px) {
#container{

    width:800px;
}

}

<pre class="brush:php;toolbar:false"><div>



此解决方案创建了一个灵活的网格,根据浏览器大小调整其宽度。它还确保最后一行左对齐,无论显示多少列。

以上是如何在没有 Flexbox 的情况下左对齐居中内联块网格中的最后一行?的详细内容。更多信息请关注PHP中文网其他相关文章!

css while using class this display
声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
上一篇:Made a whimsical theme toggle, with CSS and emojis下一篇:How Can I Blur a Div's Background Without Blurring Its Child Elements?

相关文章

查看更多