weranda
@weranda

Как разместить элементы произвольной ширины друг под друга при соприкосновении?

Привет.
Что-то, как-то я недопойму. Есть ли возможность решить задачу без JS и на флексах?
Есть три блока, идущих в один ряд. Блоки могут иметь произвольную ширину. Вот они:
656b1bd616024308721187.png
Нужно сделать так, чтобы при уменьшении размеров окна браузера при соприкосновении блоков сначала третий блок «уезжал» под первый. Вот так:
656b1c1c3b23f682411040.png
А потом при дальнейшем уменьшении окна браузера, второй блок уезжал под первый, а третий — размещался бы под вторым. Вот так:
656b1d89f0b56374401975.png
Подскажите, пожалуйста, есть ли решение?

P.S.
Вот пример HTML.
  • Вопрос задан
  • 89 просмотров
Пригласить эксперта
Ответы на вопрос 3
Kentavr16
@Kentavr16
long cold winter
@rootnoroot
значение minmax задайте
Ответ написан
Комментировать
@UthvfyV
Допустим. 3 блока.
<div class="blocks">
<div class="block block1"></div>
<div class="block block2"></div>
<div class="block block3"></div>
</div>


Тогда.
.blocks {
width: 100%;
}
.block {
width: 30%;
display: inline-block;
}

/* Уменьшаем размер экрана.
размер экрана 1026px */

@media screen and (max-width: 1026px) {
.blocks {
width: 80%;
}}
/* При длинне общего блока 80% от всей длинны экрана последнему блоку места не хватает, он спрыгивает вниз. */
/* А при длинне общего блока 50% уже и 2 блоку мало места, и что вам и надо, они дружно выстраиваются один под другим */  
@media screen and (max-width: 900px) {
.blocks {
width: 50%;
}
.block {
width: 100%;
}}


media screen and (max-width: 900px) {}
Вот этой конструкцией вы задаёте стили для элементов в зависимости от размера экрана. Т.е. при размере максимальной длинны экрана (max-width), width это длинна, 900px, ваши эдементы имеют такие-то параметры. Это назыается адаптивная вёрстка.

media screen and (max-width: 1026px) Размер для media, к прмеру 1026px, определяйте по месту. Как определить, это уже другая тема. По желанию могу ответить.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
//stablecode Вена
от 250 000 ₽
Фрамир Санкт-Петербург
от 80 000 ₽
ITooLabs Тула
от 35 000 до 40 000 ₽
02 мар. 2024, в 01:50
1500 руб./за проект
01 мар. 2024, в 23:28
500 руб./за проект