CSS - Cuadrícula con cuadrados perfectos

Question

Necesito ayuda con el CSS para generar una cuadrícula de cuadrados perfectos. El aspecto de Div es así, pero me gustaría que cada uno de ellos se vea como un cuadrado perfecto, no como un rectángulo. Establecer ancho y alto en css no lo hace. : - \

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

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

Answer 1

Es necesario combinar estas reglas de estilo para obtener lo que necesita. La propiedad flotante garantiza que se acumulen en una fila horizontal, la regla de bloqueo le permite establecer el alto y el ancho del elemento y la regla oculta de desbordamiento evita que se expanda con el contenido.

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

Answer 2

Uso display:block junto con atributos de anchura y altura.

Answer 3

Eso es inusual

intentar algo como esto. Se debe trabajar

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

Ver: http://jsfiddle.net/EyXpC/

Answer 4

Gracias a http://dinosaurswithlaserz.com/2011/07/18/fluid-squares-v2/ para señalar que se puede hacer con CSS puro y sea fluido, así:

.onesquare { 

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

}