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

我也踩过这个坑( 29 )

回答(11)

详细描述

截图

代码

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

[深圳分院|荣耀师兄] JS-钟楚炯

任务一九宫格的布局是九个格子均匀分布于网页中间，三个格子横向排列占满屏幕，每个格子中间保留一定的边距。任务一九宫格的布局还不用到居中的方法。格子在屏幕中间均匀分布靠的是宽度，高度，以及边距的控制。可以设置三个盒子相同的尺寸，左右边距相同，总宽度等于父元素狂宽度。纵向也是同样道理。

上海分院|荣耀师兄] JS-杨亚洲

兄弟，我问个问题？九宫格不能居中。无法保证格子间的布局均匀分割网页且居中

.swag{

padding-left:31%;

padding-bottom: 31%;

margin:1%;

border-radius: 20%;

background: orange;

float:left;

}

你的padding-left在图片是21%，而你下面的代码padding-left:31%。我测试过你下面的代码，基本实现了自适应。

如果按照你截图的代码，我就解释下的原因，padding-left撑开了宽度，你设置了padding-left是21%，所以一个小盒子的宽度是21%。在加上你设置的margin,所以一行只能显示4个。（5个小盒子总宽度超过100%）。至于你想要居中的话，父容器设置text-align:center.