CSS - 完美广场网格

问题描述：

需要一些CSS帮助来生成完美广场网格。 Div看起来像这样，但我想让他们看起来像一个完美的方形 - 而不是一个矩形。在CSS中设置宽度和高度不会。： - \CSS - 完美广场网格

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

显示：块不BTW工作... http://jsfiddle.net/AYCkr/ – ina 2010-08-05 07:10:05

答

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

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

浮左吧它嗖！ http://jsfiddle.net/AYCkr/1/ – ina 2010-08-05 07:14:24

答

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

不幸的是，块打破了水平行... – ina 2010-08-05 07:02:39

答

那是不寻常的

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

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

不幸的是，块打破了水平行... - – ina 2010-08-05 07:03:31

hahaha @ina，当然，你必须浮动它。看到更新 – Starx 2010-08-05 07:09:51

答

感谢http://dinosaurswithlaserz.com/2011/07/18/fluid-squares-v2/您指出它可以用纯CSS来完成，并流体，如：

.onesquare { 

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

}