Question

我尝试创建第一个双倍大小的 19 方块。

正方形：width: 9.09%; padding: 2.27% 0;。所以，我用了第一个width: 18.18%; padding: 4.54% 0;。但是它的高度不比其他人高。

这里是JSFiddle。

padding的正确百分比是多少？为什么不是 4.54 ？

Answer 1

您忘记了文字使用的行高。

您可以将其重置为0：http://jsfiddle.net/ooLzq85o/1/

＆＃13;

.button {
    color: #fff;
    display: inline-block;
    text-align: center;
    vertical-align: top;
    float: left;
    width: 9.09%;
	padding: 4.5% 0;
    background: maroon;
    line-height:0;
}
.double {
    width: 18.18%;
	padding: 9% 0;
    background: red;
}

＆＃13;

<div id="buttons">
    <div class="button double">1</div>
    <div class="button">2</div>
    <div class="button">3</div>
    <div class="button">4</div>
    <div class="button">5</div>
    <div class="button">6</div>
    <div class="button">7</div>
    <div class="button">8</div>
    <div class="button">9</div>
    <div class="button">10</div>
    <div class="button">11</div>
    <div class="button">12</div>
    <div class="button">13</div>
    <div class="button">14</div>
    <div class="button">15</div>
    <div class="button">16</div>
    <div class="button">17</div>
    <div class="button">18</div>
    <div class="button">19</div>
</div>

＆＃13;

Answer 2

您可以使用视口单元。

.button {
    width: 9.09vw;
    height: 9.09vw;
}
.double {
    width: 18.18w;
    height: 18.18vw;
    background: red;
}

.buttons {overflow: hidden; }
.button {
	color: #fff;
	display: inline-block;
	text-align: center;
	vertical-align: top;
	float: left;
	width: 9.09vw;
    height: 9.09vw;
	background: maroon;
}
.double {
	width: 18.18w;
	height: 18.18vw;
    background: red;
}

			<div id="buttons">
				<div class="button double">
					1
				</div>
				<div class="button">
					2
				</div>
				<div class="button">
					3
				</div>
				<div class="button">
					4
				</div>
				<div class="button">
					5
				</div>
				<div class="button">
					6
				</div>
				<div class="button">
					7
				</div>
				<div class="button">
					8
				</div>
				<div class="button">
					9
				</div>
				<div class="button">
					10
				</div>
				<div class="button">
					11
				</div>
				<div class="button">
					12
				</div>
				<div class="button">
					13
				</div>
				<div class="button">
					14
				</div>
				<div class="button">
					15
				</div>
				<div class="button">
					16
				</div>
				<div class="button">
					17
				</div>
				<div class="button">
					18
				</div>
				<div class="button">
					19
				</div>
			</div>
		</div>

Answer 3

没有填充百分比可以使较大的正方形比常规正方形高两倍。

常规正方形是一个字符块高，加上父元素宽度的4.54％。对于较大的正方形是两倍高，它需要两个字符块高，加上父元素宽度的9.08％。

如果在块中放入两行，并将填充设置为4.54% 0，则较大的块将始终是常规块的两倍：

http://jsfiddle.net/Guffa/ooLzq85o/3/

如果你不想在较大的块中有两个字符行，那么你需要设置常规块的行高，这样你就可以在较大的块中使用double：

http://jsfiddle.net/Guffa/ooLzq85o/4/

Answer 4

因为填充加倍只会使填充加倍。 Box模型说：视觉高度=高度 - 内容+高度 - 填充+高度 - 边框

我建议你使用border-box作为box-sizing模型，并明确设置按钮的高度： e.g：

.buttons { 
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box; /*Cross-Browser-prefixes */
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.button {
    color: #fff;
    display: inline-block;
    text-align: center;
    vertical-align: top;
    float: left;
    width: 2rem;
    height: 2rem;
    background: maroon;
}
.double {
    width: 4rem;
    height: 4rem;
    background: red;
}

http://jsfiddle.net/usj9u2je/1/

CSS中的双正方形

4 个答案: