Как сделать так чтобы блоки не съезжали с места?

Question

[gomer1726]

Вот есть такие блоки и если вдруг один из них имеет нестандартный размер, то это сказывается на блоке что снизу. Как предотвратить?

Comments

[everliving]

masonry.desandro.com

Answer 1

[Александр Петров]

после каждого третьего блока ставь:

и в css пропиши:
.clear{
clear:both;
}

это работает, если у каждого блока стоит float:left

Comments

[gomer1726]

а как узнать после третьего если они выводиться в цикле?

[ILE -Salim]

gomer1726: if (value % 3 == 0) так)

[Сергей delphinpro]

gomer1726: :nth-child(3n+1)

Answer 2

[Сергей Горячев]

display: inline-block;
А то навыдумывали тут разного.

Answer 3

[Денис Гончаренко]

Если ты хочешь, чтобы блоки были независимы друг от друга, пропиши для них:
position:absolute;
А для их родителя:
position:relative;

И для каждого блока настрой необходимые координаты

left:x;
top:y;

если надо чтобы нижний ряд смещался изза растянутого по вертикали блока в верхнем ряду добавь после каждого ряда элемент с:

display:block;
clear:both;

Answer 4

[Максим Тимофеев]

Если без javascript:
1. Можно задать всем min-height, если его возможно рассчитать
1.1 Можно min-height не самому блоку, а его ребенку, который его растягивает. Или же использовать для такой детки text-overflow (htmlbook.ru/css/text-overflow)
2. Каждую строку положить в свой контейнер
3. Используя медиа запросы в css добавлять через after clear:left для каждого расcчитанного :nth-of-type
3.1 Если блоков всегда 3 в ширину, то просто :nth-of-type(3n+1) {clear:left;}

Answer 5

[FeNUMe]

Если хотите как слева, то достаточно послушать Sergey Goryachev и использовать display: inline-block;.
Если как справа - поможет современный стандарт разметки flexbox, конкретно гуглить "flexbox masonry". Для поддержки древних браузеров придется использовать masonry плагин для jquery, или аналогичные js-решения.

Comments

[gomer1726]

пробовал как написал Сергей но и так не получается. Но именно так я и хотел

[FeNUMe]

gomer1726: боюсь без примеров вашего кода, например на Codepen/JSFiddle помочь будет сложно без игры в угадайку с перебором всей документации по css

Answer 6

[Michael Peteichuk]

используй box-sizing

Comments

[Vladimir Yamshik]

и чем поможет box-sizing?

[Michael Peteichuk]

Vladimir Yamshik: тем, что это свойство выстраивает в виде бокса элементы, почитайте подробнее об этом. будет время, покажу пример.

[Vladimir Yamshik]

Michael Peteichuk: я вроде понял что вы имеете ввиду. Вы хотите с помощью box-sizing сделать один размер? Но он имел ввиду что заранее известно что блоки будут отличаться преднамеренно.

[Michael Peteichuk]

блоки отличаться то будут, но, выход из положения, чтобы блоки не теряли вид и не ползли кто куда как показано в верху, то можно использовать это свойство.