【九宫格不能居中。无法保证格子间的布局均匀分割网页且居中 】 | IT修真院·坑乎
问题已收录 九宫格不能居中。无法保证格子间的布局均匀分割网页且居中
我也踩过这个坑( 43 )
已统计您的踩坑,无需重复点击
回答(16)
详细描述
截图
代码
编辑于2021-12-09
  • [无名弟子]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