CSS - Grille avec des carrés parfaits

Question

Besoin d'aide avec le CSS pour générer une grille de carrés parfaits. La Div ressemble à ceci, mais j'aimerais que chacun d'eux ressemble à un carré parfait - pas à un rectangle. La définition de la largeur et de la hauteur dans css ne le fait pas. : - \

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

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

Answer 1

Vous devez combiner ces règles de style pour obtenir ce dont vous avez besoin. La propriété float assure la pile dans une ligne horizontale, la règle de bloc vous permet de définir la hauteur et la largeur de l'élément et la règle cachée de débordement l'empêche d'étendre avec le contenu.

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

Answer 2

Utilisation display:block conjointement avec la largeur et la hauteur des attributs.

Answer 3

Cest inhabituel

essayer quelque chose comme ça. Il devrait fonctionner

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

Voir: http://jsfiddle.net/EyXpC/

Answer 4

Merci à http://dinosaurswithlaserz.com/2011/07/18/fluid-squares-v2/ pour remarquer qu'il peut être fait avec CSS pur et être fluide, comme ceci:

.onesquare { 

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

}