Как разместить элементы произвольной ширины друг под друга при соприкосновении?
Привет.
Что-то, как-то я недопойму. Есть ли возможность решить задачу без JS и на флексах?
Есть три блока, идущих в один ряд. Блоки могут иметь произвольную ширину. Вот они:
Нужно сделать так, чтобы при уменьшении размеров окна браузера при соприкосновении блоков сначала третий блок «уезжал» под первый. Вот так:
А потом при дальнейшем уменьшении окна браузера, второй блок уезжал под первый, а третий — размещался бы под вторым. Вот так:
Подскажите, пожалуйста, есть ли решение?
P.S.
Вот пример HTML.
Дополнительно:
Вроде стандартное поведение флексов
+ margin-right auto для второго элемента
Пока думаю, что без js не выйдет
Ответы:
Это имел в виду?
- Нет, не то это. Поясню. Если сделать случайную ширину элементов, то при достижении определенного размера ширины окна браузера элементы в зависимости от их ширины и доступной ширины контейнера не будут идти именно в той очередности, в которой показал я на примере в вопросе. Вот вам наглядный пример из вашего примера:
А надо чтобы была универсальная логика при любых ширине элементов и ширине окна браузера, т. е. при любом раскладе: третий элемент уходит на второю строку первым, второй — на вторую вторым и никак иначе. Тут, наверное, все-таки, JS нужен.
- weranda, изменил пример. Очередность соблюдается при любых размерах. Это то же практически что перенос слов в строках. Или дополни запрос если я не понял проблему.
- Kentavr16, Если установить значения контейнеров, к примеру, в 250, 625 и 75 пикселей, то этот пример не сработает.
значение minmax задайте
Допустим. 3 блока.
<div class="blocks"> <div class="block block1"></div> <div class="block block2"></div> <div class="block block3"></div> </div> |
<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%; }} |
.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, определяйте по месту. Как определить, это уже другая тема. По желанию могу ответить.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для размещения элементов произвольной ширины друг под другом при соприкосновении можно использовать свойство CSS flexbox. Flexbox - это мощное средство для управления распределением элементов внутри контейнера.
Для начала, создайте контейнер, в котором будут располагаться ваши элементы. Примените к этому контейнеру следующие CSS свойства:
.container { display: flex; flex-wrap: wrap; }
Свойство display: flex; делает контейнер флекс-контейнером, а свойство flex-wrap: wrap; позволяет элементам переноситься на новую строку при нехватке места.
Затем, определите стили для каждого элемента внутри контейнера. Например:
.item { flex: 1 0 30%; /* ширина элемента - 30%, может изменяться */ margin: 5px; /* отступ между элементами */ }
В данном примере, свойство flex: 1 0 30%; указывает, что элемент будет занимать 30% доступного пространства, но при необходимости может изменяться.
Теперь, в HTML разместите свои элементы внутри контейнера:
<div class="container"> <div class="item">Element 1</div> <div class="item">Element 2</div> <div class="item">Element 3</div> </div>
Таким образом, элементы будут автоматически распределены друг под другом при нехватке места, сохраняя при этом заданную ширину и порядок.
Этот метод позволяет гибко управлять расположением элементов на странице и обеспечивает адаптивность для различных размеров экранов.