Как реализовать заполнение div пустого пространства?

Question

[Abdus]

Добрый день.
Изучаю CSS. Хочу сделать заполнение div'ами страниц как на этом сайте galyonkin.com

Есть идеи как это реализовать?

У меня вышло так только:

https://jsfiddle.net/9hvg3utf/

Т.е. заполнение есть, но только при превышении максимальной ширины, а хочется, чтоб было динамически. Или это надо javascript использовать?

Answer 1

[Александр Миранович]

https://jsfiddle.net/9hvg3utf/1/

Comments

[Abdus]

Выглядит хорошо, но на этом сайте при уменьшении размера окна div перемещается один под другой. с 3-х до 1 при минимальной ширине, а у вас пропорционально (т.е. на мобильной версии ничего не будет видно)

[rmaksim]

например так https://jsfiddle.net/9hvg3utf/2/

[Abdus]

rmaksim: да, спасибо

Answer 2

[dm]

Делаешь блоки, задаешь им ширину 32% (+4% на 2 отступа), задаешь флоат.

HTML

<section>
    <div></div>
    <div></div>
    <div></div>
</section>

CSS

div {
    float: left;
    width: 32%;
    margin-right: 2%
}
div:nth-of-type(3n) {
    margin-right: 0;
}
section::after {
    content: "";
    display: block;
    clear: both;
}

Comments

[Abdus]

Выглядит хорошо, но на этом сайте при уменьшении размера окна div перемещается один под другой. с 3-х до 1 при минимальной ширине, а у вас пропорционально (т.е. на мобильной версии ничего не будет видно) Уменьшите размер окна до 500 пикселей galyonkin.com

[dm]

Abdus: projects.alexdev.ru/adaptive/example5

[dm]

Abdus: Хорошее объяснение именно на эту тему: alexdev.ru/1497

[Abdus]

Дмитрий Кострубяк: да, это похоже что надо. Спасибо

[dm]

Abdus: Можно готовый код взять, а можно и вникнуть, это не сложно делается.

[Abdus]

Дмитрий Кострубяк: 90% случаев я вникаю =)

[dm]

Abdus: Ну тогда с этим случаем не будет проблем. )

[Abdus]

Дмитрий Кострубяк: я использовал media и box-sizing: border-box; т,к. я использую border-left:1px для разделения картинок между собой.

У меня возник вопрос: почему border не позволяет всунуть еще один элемент, пока левый не достигнет максимального значения? Избежать этого можно только используя box-sizing для игнорирования border. Почитал описание CSS, там не указана причина такого поведения.

[dm]

Abdus: Не совсем понял про максимальное значение.
box-sizing: border-box для того и нужен, чтобы расчитывалось все иначе, чем по умолчанию в html.
Например, по умолчанию два блока с шириной 50% не станут в ряд, если у них будут ненулевые бордеры.

[Abdus]

Дмитрий Кострубяк: Т.е. это нормальное поведение по правилам разметки html. надо почитать про эти правила

Answer 3

[OutworldDevourer]

Посоветую разобрать поведение: float:left or right, к флоту сразу посмотри clear:both потому, что если елемент с флотом он сразу выходит с общего потока, и display:inline-block.