【九宫格不能居中。无法保证格子间的布局均匀分割网页且居中】

九宫格不能居中。无法保证格子间的布局均匀分割网页且居中

我也踩过这个坑( 44 )

已统计您的踩坑,无需重复点击

回答(16)

详细描述

截图

代码

.swag{
  padding-left:31%;
  padding-bottom: 31%;
  margin:1%;
  border-radius: 20%;
  background: orange;
  float:left;
}

编辑于2024-04-18

时间排序

热门排序

[无名弟子]JS-柳桐
0

任务一九宫格的布局还用不到居中的方法。格子在屏幕中间均匀分布靠的是宽度，高度，以及边距的控制。我当时宽度和高度用的都是30vw，你可以试试。

查看全部>

编辑于2018-10-20
[郑州|结业弟子]JS-徐海达
0

看了一下你的代码，
padding-left:31%;
padding-bottom: 31%;
，然后设置1%的magin，每个盒子都有1%的间距。实现自适应应该是没有问题的.但是你图片上面的padding-left:21%,padding-bottom:21%是什么鬼鬼？把21改成31%基本就没什么问题了.还有注意css的书写顺序.

查看全部>

编辑于2018-09-26
[萌新|散修弟子]JS-2171
0

你可以增加他的padding，调整到合适的大小，或者用vw单位，建议你给他一个固定的宽和高，调整一下值就行了注意3个盒子，要加上他们之间的距离刚好占满页面，这个值自己多调整一下就行。。

查看全部>

编辑于2018-08-31
[散修弟子]UI-397
0

测试

查看全部>

编辑于2018-03-16
[武汉|结业弟子]JS-邱天成
0

Q：九宫格不能居中。无法保证格子间的布局均匀分割网页且居中。
A：从你给的图上来看，你想用float来实现九宫格，没有居中的原因就是你的margin少了，你设置31%的宽高，想实现无限居中的话应该把margin设置为 1.16%，但这不是唯一的实现思路。
可以尝试给父元素设置文本居中，把9个div设置成 inline-block ，子元素的宽高只要不超过，随你怎么设~
两分到手~美滋滋

查看全部>

编辑于2018-03-10
[北京|结业弟子]JS-朱春雨
0

你的单个宽度为21%，父盒子宽度100%， 21% * 4 = 84%再加上外边距也达不到一行三个的宽度，修改一下方块宽度就好了

查看全部>

编辑于2019-12-21

去第页