@gomer1726

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

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

799c5ea3e52f463f846ffee7ccae3a85.png
  • Вопрос задан
  • 7393 просмотра
Решения вопроса 1
Mirkom63
@Mirkom63
Я программист
после каждого третьего блока ставь:

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

это работает, если у каждого блока стоит float:left
Ответ написан
Пригласить эксперта
Ответы на вопрос 5
webirus
@webirus
Тыжверстальщик! Наверстай мне упущенное...
display: inline-block;
А то навыдумывали тут разного.
Ответ написан
Комментировать
Если ты хочешь, чтобы блоки были независимы друг от друга, пропиши для них:
position:absolute;
А для их родителя:
position:relative;

И для каждого блока настрой необходимые координаты
left:x;
top:y;


если надо чтобы нижний ряд смещался изза растянутого по вертикали блока в верхнем ряду добавь после каждого ряда элемент с:
display:block;
clear:both;
Ответ написан
Комментировать
webinar
@webinar
Учим yii: https://youtu.be/-WRMlGHLgRg
Если без 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;}
Ответ написан
Комментировать
FeNUMe
@FeNUMe
m2Uba.png
Если хотите как слева, то достаточно послушать Sergey Goryachev и использовать display: inline-block;.
Если как справа - поможет современный стандарт разметки flexbox, конкретно гуглить "flexbox masonry". Для поддержки древних браузеров придется использовать masonry плагин для jquery, или аналогичные js-решения.
Ответ написан
Peteichuk
@Peteichuk
Front-End Developer
используй box-sizing
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы