【任我行的回答：在九宫格里面些写字，但是无法让字体变大，如果变大的话，就没有办法来维持九宫格了 _九宫格】

在九宫格里面些写字，但是无法让字体变大，如果变大的话，就没有办法来维持九宫格了

我也踩过这个坑( 1 )

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

回答(4)

九宫格

详细描述

截图

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<link rel = "stylesheet" type = "text/css" href = "b.css"></link>

<body>
    <div class="one">佟</div>
    <div class="one"></div>
    <div class="one"></div>
    <div class="one"></div>
    <div class="one"></div>
    <div class="one"></div>
    <div class="one"></div>
    <div class="one"></div>
    <div class="one"></div>
  
</body>
</html>

.one{
    width:31.3%;
    float: left;
    background-color:orange;
    padding-top:31.3%;
    margin: 1%;   
}

编辑于2024-04-25

[上海|结业弟子]JS-任我行

你的css部分用的是padding-top来撑起来的盒子高度，而文字部分是在盒子模型的content部分，所以文字的高度又撑起了盒子的高度，所以盒子就变高了

所以如果想插入文字想要盒子不改变就要去修改padding-top属性

编辑于2018-08-31

时间排序

热门排序

[上海|荣耀师兄]JS-周能
0

你的九宫格的布局是通过padding-top的属性撑起来，现在盒子的总的高度就是padding的高度，如果你在里面加了文字，文字内容就属于content了，这个时候你的盒子的总高度就是padding的高度和content的高度（height=padding+content），盒子的总高度和总宽度的属性盒子模型都有讲解，去看一下，如果要在里面加文字的话后期的任务会接触到一个vw和vh的单位，可以先了解一下

查看全部>

编辑于2018-10-26
[成都|荣耀师兄]JS-李文龙
0

你盒子的大小是根据你设定的padding和content的大小变化而在变化。你可以去了解一下box-sizing属性，其中是一个属性是border-box，就是说为元素指定的任何内边距和边框都将在以及设定的宽度和高度内进行绘制。

查看全部>

编辑于2018-11-03
[成都|荣耀师兄]JS-黄武扬
0

了解盒子模型的基础原理，padding的使用构成了盒子的大小，此时文字的加入也增加了盒子内容的大小。自然就不能保持原样了。盒子设定宽高以后再加文字是可行的，width：31% height：31%background-color：orange，之后加入文本就可以了

查看全部>

编辑于2018-12-15

去第页