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

Question

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

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

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

Answer 1

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

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

Answer 2

感谢http://dinosaurswithlaserz.com/2011/07/18/fluid-squares-v2/指出它可以用纯CSS完成并且流畅，像这样：

.onesquare {

width: 30%;
margin: 0px 2% 0 0;
padding-bottom: 30%;
background-color: red;

}

Answer 3

这很不寻常

尝试这样的事情。它应该工作

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

请参阅：http://jsfiddle.net/EyXpC/

Answer 4

将display:block与宽度和高度属性一起使用。