代码:
<html>
<body>
<div>
<div style="display: inline-block; background: #111; width: 200px; height: 200px;"></div>
<div style="display: inline-block; background: #111; width: 200px; height: 200px;"></div>
<div style="display: inline-block; background: #111; width: 200px; height: 200px;"></div>
<div style="display: inline-block; background: #111; width: 200px; height: 200px;"></div>
<div style="display: inline-block; background: #111; width: 200px; height: 200px;"></div>
<div style="display: inline-block; background: #111; width: 200px; height: 200px;"></div>
<div style="display: inline-block; background: #111; width: 200px; height: 200px;"></div>
<div style="display: inline-block; background: #111; width: 200px; height: 200px;"></div>
<div style="display: inline-block; background: #111; width: 200px; height: 200px;"></div>
<div style="display: inline-block; background: #111; width: 200px; height: 200px;"></div>
</div>
</body>
</html>
预期效果是 div 列表居中,但列表内容不居中(像例图中的效果,最后一行在左边)
如果直接 text-align: center ,最后一行也会被居中 如果再套一层 div 再 text-align: center ,因为一行显示不下的情况下内层 div 宽度是 100%,所以外层的 center 根本没生效,尝试了一堆 flex width:fit-content 之类的样式全都不能 trim 内层 div
1
codehz 2023-01-24 20:33:58 +08:00
一眼 display: grid
|
2
horseInBlack 2023-01-24 20:35:12 +08:00
给 list 加一个 margin:0 auto;就行了
现代 CSS 不会整就直接 flex 就行了,flex 该怎么对齐就怎么对齐,你这种情况往外面套容器 div ,容器里面继续 flex 也能重新设置对齐方式 <html> <body> <div class="list"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> </body> </html> <style lang=""> body { background-color: skyblue; } .list { width: 500px; margin: 0 auto; } .box { display: inline-block; background: #111; width: 100px; height: 100px; } </style> |
3
Posuker 2023-01-24 20:38:21 +08:00
有点懵,简单写一下。
<html> .... <body> <div style="margin: auto; display: flex; flex-wrap: wrap; width: 1200px"> <div style="width: 200px; height:200px"></div> <div style="width: 200px; height:200px"></div> <div style="width: 200px; height:200px"></div> </div> </body> </html> 这样出来的效果,大概符合预期 |
4
edis0n0 OP @horseInBlack @Posuker 但我这情况 list 是不固定宽度,填满自动换行的,你们的方案都要固定列表宽度
|
6
edis0n0 OP @horseInBlack #2 试过 div ,填满自动换行还是会导致宽度变成 100%而不是实际宽度,无法居中
|
7
edis0n0 OP @horseInBlack #6 试过 div 》 试过 flex
|
8
wenzhoou 2023-01-24 20:49:03 +08:00
https://jsfiddle.net/a2pz3d6r/
<div class="outer"> <div class="inner"> </div> <div class="inner"> </div> <div class="inner"> </div> <div class="inner"> </div> <div class="inner"> </div> <div class="inner"> </div> <div class="inner"> </div> <div class="inner"> </div> <div class="inner"> </div> <div class="inner"> </div> <div class="inner"> </div> </div> .outer { display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; } .inner { display: inline-block; background: #111; width: 200px; height: 100px; margin: 10px; } |
9
buxudashi 2023-01-24 20:49:10 +08:00
你都固定宽度了。不能 float:left 吗?
|
10
edis0n0 OP |
11
wenzhoou 2023-01-24 20:52:47 +08:00
没看清题
|
12
codehz 2023-01-24 20:54:40 +08:00
@edis0n0 只要一层就可以了
grid 设置好列的模式 最后用 justify-content https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content |
13
codehz 2023-01-24 21:06:52 +08:00
设置列的模式,就用 grid-template-columns: repeat(auto-fit, 100px);
100 可以换成需要的宽度 甚至还能配合 minmax 做列的宽度自适应 中间的 gap 就直接用 gap 属性 |
14
wenzhoou 2023-01-24 21:34:24 +08:00 1
是不是只能动用 js 大法了? https://jsfiddle.net/Ln9r67st/
你可以试试。 |
16
crystom 2023-01-24 22:23:09 +08:00
设置外层的宽度
|
17
otakustay 2023-01-24 22:34:52 +08:00
https://codesandbox.io/s/responsive-grid-5q3s2
类似这个么?只要把外面的容器用 flex 居下中就行? |
18
qwq11 2023-01-24 23:00:58 +08:00
#2 就是最简单的,不过好像 margin 写反了?
<html> <head> <style> #container { margin: auto 5rem; } #container > div { background: #111; width: 200px; height: 200px; display: inline-block; } </style> </head> <body> <div id="container"> <div></div> <div></div> <div style="width: 600px"></div> <div></div> <div></div> <div style="width: 800px;"></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </body> </html> |
19
edis0n0 OP |
20
CYTMWIA 2023-01-25 00:36:13 +08:00 1
[![pStuT2Q.png]( https://s1.ax1x.com/2023/01/25/pStuT2Q.png)]( https://imgse.com/i/pStuT2Q)
可以试试`flex-wrap`参数 https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-wrap 可以做到堆叠元素(放不下就换行),但对于 方块集合 会在右边缘有空白 添加`justify-content: center;`到列表容器可以让方块堆叠后居中(但最后一行也居中了) |
21
zhengjian 2023-01-25 00:48:10 +08:00 2
|
22
c0t 2023-01-25 01:02:51 +08:00 via iPhone
感叹你的活好杂,上次还在问 shader 呢…
|