Задание ширины квадратных элементов без указания ширины и высоты («плиточка»)

• 12, 10, 2013
•  bullgare
•  HTML and CSS
• No Comments.

Без указания высоты, ширины, но и без дергания после загрузки картинок и контента. И без таблиц.
Эдакая «плиточка» элементов разных ширин и высот.

<style>
.main {
width: 500px;
}

.structure {
width: 25%;
float: left;
}

.wrapper {
position: relative;
padding: 100% 0 0;
}

.img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #ccc;
border: 1px solid #000;
}
</style>
<div class="main">
<div class="structure">
<div class="wrapper">
<div class="img"></div>
</div>
</div>
<div class="structure">
<div class="wrapper">
<div class="img"></div>
</div>
</div>
<div class="structure">
<div class="wrapper">
<div class="img"></div>
</div>
</div>
<div class="structure">
<div class="wrapper">
<div class="img"></div>
</div>
</div>
<div class="structure">
<div class="wrapper">
<div class="img"></div>
</div>
</div>
<div class="structure">
<div class="wrapper">
<div class="img"></div>
</div>
</div>
<div class="structure">
<div class="wrapper">
<div class="img"></div>
</div>
</div>
</div>

.structure отвечают за взаимное расположение элементов на странице, а во вложенных элементах скрыта магия (всё дело в волшебной теме с тем, что паддинг считается от ширины родительского элемента).
JS Bin

В итоге получаем красивые квадратики:

Почему квадраты: потому что padding считается от ширины элемента.