CSS 中的双平方

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/

.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;
}

<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>

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/

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

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

Answer 4

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

我建议您使用 border-box 作为 box-sizing 模型并明确设置按钮的高度：例如：

.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 中的双平方

Double square in CSS

html

css

percentage