Question

我希望每行有10个二次方格，在本例中为10%

但是，对于我当前的stylesheet，将高度设置为10%会使正方形消失。

如何连续实现10个二次方格？

CSS

#container {
    width: 100%;
}

.square {
    float: left;
    width: 10%;
    height: 10%;
}

HTML

<div id="container">

    <div class="square red"></div>
    <div class="square blue"></div>
    <div class="square red"></div>
    <div class="square blue"></div>
    <div class="square red"></div>
    <div class="square blue"></div>
    <div class="square red"></div>
    <div class="square blue"></div>
    <div class="square red"></div>
    <div class="square blue"></div>

</div>

以下是转载的问题：http://jsfiddle.net/BLx8t/1/

Answer 1

来自height spec，

<强>＆LT;百分比＆GT;
指定百分比高度。百分比是根据生成的框的包含块的高度计算的。 如果未明确指定包含块的高度（即，它取决于内容高度），这个元素不是绝对的定位后，该值计算为“自动”。高度的百分比 root元素相对于初始包含块。

如果您希望它们是正方形，您可以使用相对于父级宽度计算的属性（与height不同），例如margin或padding：

margin（Demo）

.square:before {
    content: '';
    display: block;
    margin-top: 100%;
}

padding（Demo），谢谢@KingKing
```
.square {
    padding-top: 10%;
}
```

连续获得10个二次方格

1 个答案: