CSS - 具有完美正方形的网格

Question

需要一些帮助CSS来生成完美正方形的网格.Div看起来像这样,但我希望每个看起来都像一个完美的正方形 - 而不是一个矩形.在css中设置宽度和高度不会这样做.: - \

<div class="square" /> ... <div class="square" /> <div class="linebreak" />

Answer 1

您需要结合这些样式规则来获得所需.float属性确保它们堆叠在一个水平行中,块规则允许您设置元素的高度和宽度,溢出隐藏规则阻止它与内容一起扩展.

.square {
    float: left;
    width:200px;
    height:200px;
    display:block;
    overflow:hidden;
}