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 вместе с шириной и высотой атрибуты.

Answer 3

Thats необычный

попробуйте что-то вроде этого. Он должен работать

.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; 

}