请 css 大佬帮忙看下这个居中难题,折腾了 3 个小时还没解决

查看 516|回复 23
edis0n0
OP
  
@wenzhoou #8 你这最后一行也居中了,我需要最后一行居左,列表居中
@buxudashi #9 明显是 ***不能*** 固定列表宽度
wenzhoou   
没看清题
codehz   
@edis0n0 只要一层就可以了
grid
设置好列的模式
最后用 justify-content
https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
codehz   
设置列的模式,就用 grid-template-columns: repeat(auto-fit, 100px);
100 可以换成需要的宽度
甚至还能配合 minmax 做列的宽度自适应
中间的 gap 就直接用 gap 属性
wenzhoou   
是不是只能动用 js 大法了? https://jsfiddle.net/Ln9r67st/
你可以试试。
Posuker   
@edis0n0 宽度随意哈,并不需要定宽,flex-wrap: wrap 了,超出宽度就会自动换行了。
crystom   
设置外层的宽度
otakustay   
https://codesandbox.io/s/responsive-grid-5q3s2
类似这个么?只要把外面的容器用 flex 居下中就行?
qwq11   
#2 就是最简单的,不过好像 margin 写反了?


#container {
margin: auto 5rem;
}
#container > div {
background: #111;
width: 200px;
height: 200px;
display: inline-block;
}


















edis0n0
OP
  
目前能工作的只有 14 楼 @wenzhoou 的代码,但用 js 实现这个实在不优雅,还在尝试 12 楼的
@qwq11 #18 你这个没有居中,只是左右有 5rem margin
@crystom #16 外层宽度***不固定***!!!
您需要登录后才可以回帖 登录 | 立即注册

返回顶部