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

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

DDD
发布: 2024-12-19 14:33:09
原创
607 人浏览过

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;
}
登录后复制

}

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><div>
登录后复制



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

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

来源:php.cn
上一篇:使用 CSS 和表情符号制作了一个异想天开的主题切换 下一篇:如何在不模糊其子元素的情况下模糊 Div 的背景?
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
关于CSS思维导图的课件在哪? 课件
来自于 2024-04-16 10:10:18
0
0
1947
相关专题
更多>
热门推荐
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板