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

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

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

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

</div>

</div>

</div>

</div>

</div>

</div>

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

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

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

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

Similar Posts

LEAVE A COMMENT Отменить ответ