Динамические размещение элементов

@SanychBY · Регистрация: 04.06.2013

Студворк — интернет-сервис помощи студентам

Здравствуйте.
Есть некие блоки в диве размер которого не известен. Блоки размещены с строку, а когда не влазят переходят на следующую строку. и так пока все блоки не разместятся. Размер одного блока 100px, расстояние между блоками и стенками дива не меньше 20px слева и справа, и того 40px. Сверху и снизу нас не интересует. Цель: количество блоков в строке должно изменяться динамически а зависимости от того, сколько блоков влезает. Если блок был на нижней строке, а див увеличили в размерах, то он должен перейти на верхнюю строку, если ему хватает места, и так по цепочке, пока все не разместятся. Если див уменьшили, то блок сверху должен перейти вниз, и так все блоки по цепочке.
Например див 500px, в него влезет 4 блока. Как только я уменьшу див до 480рх места уже не хватит. Получится 3 блока на 1 строке. Расстояние между которыми, будет по уже 45px ([480 - 100*3]/4 = 45). Изменять расстояние между блоками, не менее важно чем определить их количество на строку и перенести их.
Подскажите, как это реализовать. Думаю в css что - то подобное предусмотрено. Спасибо.

@Lazy_Den · 21.01.2015, 02:27

SanychBY, такие вещи проще делать с помощью JS, но если пытаться обойтись средствами CSS, то в какой-то степени поможет flexbox. Пример в песочнице (изменяйте размер фрейма, где выводится результат).

HTML5
1
2
3
4
5
6
7
8
9
<div id="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#container {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    align-content: space-around;
    max-width: 100%;
    padding: 0 20px 20px 0;
    outline: 1px solid #900;
}
#container > div {
    flex: none;
    width: 100px;
    height: 100px;
    margin: 20px 0 0 20px;
    outline: 1px solid #999;
}

@hoob777 · 21.01.2015, 09:48

Lazy_Den, Я только приступил к изучению, и вообще впервые слышу про flex )), вот сейчас читаю статью про это свойство, и понимаю что такие атрибуты как float и position вообще неактуальны, если необходимо выстроить контейнер с различными блоками внутри. Кстати учу по книге, так там вообще этого нет.. Хотя вроде как flex с начала 2014-го поддерживаться браузерами начал.

@SanychBY · 21.01.2015, 13:18 **[ТС]**

Сообщение от Lazy_Den

такие вещи проще делать с помощью JS

Это как с пушки по воробьям или танцевать с бубном ради изобретения велосипеда.

Сообщение от Lazy_Den

flexbox

Гениально и простое решение. А с поддержкой браузеров я уже давно смерился, пишу под хром, мазилу и новую оперу и все.

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! */ #include <iostream> #include <stack> #include <cctype>. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@SanychBY 39 / 46 / 3 Регистрация: 04.06.2013 Сообщений: 1,532

	Динамические размещение элементов 21.01.2015, 01:59. Показов 1801. Ответов 3 Метки нет (Все метки) Здравствуйте. Есть некие блоки в диве размер которого не известен. Блоки размещены с строку, а когда не влазят переходят на следующую строку. и так пока все блоки не разместятся. Размер одного блока 100px, расстояние между блоками и стенками дива не меньше 20px слева и справа, и того 40px. Сверху и снизу нас не интересует. Цель: количество блоков в строке должно изменяться динамически а зависимости от того, сколько блоков влезает. Если блок был на нижней строке, а див увеличили в размерах, то он должен перейти на верхнюю строку, если ему хватает места, и так по цепочке, пока все не разместятся. Если див уменьшили, то блок сверху должен перейти вниз, и так все блоки по цепочке. Например див 500px, в него влезет 4 блока. Как только я уменьшу див до 480рх места уже не хватит. Получится 3 блока на 1 строке. Расстояние между которыми, будет по уже 45px ([480 - 100*3]/4 = 45). Изменять расстояние между блоками, не менее важно чем определить их количество на строку и перенести их. Подскажите, как это реализовать. Думаю в css что - то подобное предусмотрено. Спасибо. 0

@hoob777 5 / 5 / 5 Регистрация: 03.01.2015 Сообщений: 115
	21.01.2015, 09:48
	Lazy_Den, Я только приступил к изучению, и вообще впервые слышу про flex )), вот сейчас читаю статью про это свойство, и понимаю что такие атрибуты как float и position вообще неактуальны, если необходимо выстроить контейнер с различными блоками внутри. Кстати учу по книге, так там вообще этого нет.. Хотя вроде как flex с начала 2014-го поддерживаться браузерами начал. 0

Динамические размещение элементов

Решение