Задать вопрос
weranda
@weranda

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

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

P.S.
Вот пример HTML.
  • Вопрос задан
  • 90 просмотров
Подписаться 1 Простой 6 комментариев
Пригласить эксперта
Ответы на вопрос 3
@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, определяйте по месту. Как определить, это уже другая тема. По желанию могу ответить.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы