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

使用display:block與寬度一起和height屬性。

Answer 3

那是不尋常的

嘗試這樣的事情。它應該工作

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

參見：http://jsfiddle.net/EyXpC/

Answer 4

感謝http://dinosaurswithlaserz.com/2011/07/18/fluid-squares-v2/您指出它可以用純CSS來完成，並流體，如：

.onesquare { 

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

}