Как разместить три «резиновых» блока?

Question

[Александр]

Здравствуйте. Помогите пожалуйста советом по реализации идеи. В блоке со стилем max-width: 850px - родитель (нельзя его менять, если только вложить другой, со своими размерами), нужно разместить горизонтально 3 блока. Если ширина родителя позволяет, то отображаются все три блока рядом, но если ширина уменьшается (регулируют окно браузера), то пока хватает места рядом - отображаются 2 блока, а третий ниже, автоматически на всю ширину родителя должен получится, а когда и двум "тесно" становится, то все три должны быть размещены друг под другом, с автоматической шириной (т.е подстраиваться под ширину родителя). Ну и максимальный размер каждого блока когда они идут все три горизонтально не должен превышать в ширину 265px. Возможно ли такое реализовать на css или тут только уже JS применять?

Answer 1

[Сергей delphinpro]

Александр, Последнее условие вставляет палки в колеса.
265 *3 = 795 < 850; плюс медиа привязаны к вьюпорту.

В общем вот вариант, он работает, когда .parent ограничивается только вьюпортом.
Сделайте padding для body, медленно изменяйте размер панели, поймете, о чем я.
Можно внести поправки в значения медиазапросов на реальном сайте.

Comments

[Александр]

Сергей delphinpro, я понял проблему. Сделал отступы в 5 пикселей и заметил что при медленном изменении размера окна браузера, на каком то моменте получается третье окно не на всю ширину... Но это не критично. Не думаю что кто-то реально будет сидеть и играться окном браузера. Тут больше нужно для разных устройств просто ))

[Сергей delphinpro]

Александр, Если размер 850 менять нельзя, но можно вложить еще один контейнер, то можно этот контейнер сделать max-width:795px, margin:auto. Flex на него перекинуть, последний медиазапрос убрать и проблема решится полностью.

[Александр]

Сергей delphinpro, Этот контейнер должен быть оберткой для class="parent" ?

[Александр]

Сергей delphinpro, у меня вот тако получилось:

[Сергей delphinpro]

Александр, я это имел ввиду https://jsfiddle.net/Luwscx02/

А вы ограничили размер внешнего блока.
Если можно изменить размер .parent, то проще именно это сделать.
т.е. заменить max-width: 850px на max-width: 795px

Я возможно не совсем четко все понял. Нельзя трогать html блока или нельзя в том числе менять его стили.

[Александр]

Сергей delphinpro, так вроде бы все работает как надо. А по поводу parent то его max-width менять можно. Нельзя менять размеры ОСНОВНОГО блока, где расположен весь контент и куда я хочу вставить эти 3 "резиновых" блока.
выглядит структура так сейчас:

.osnovnoy_block_u_kotorogo_nelzya_menyat_max_width {
max-width: 850px;
}

<div class="osnovnoy_block_u_kotorogo_nelzya_menyat_max_width">
<!-- -Здесь контент какой-то -->
<div class="parentBody">
<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>
</div>
<!-- -Здесь еще контент какой-то -->
</div>

А почему для parent не 850 пикселей берется ширина максимальная, потому что у основного блока еще внутренние отступы есть

Answer 2

[4mobile]

Comments

[Александр]

Спасибо, выглядит так как надо, за исключением того, что третий блок при отдельном размещении не растягивается на всю ширину.

Answer 3

[Анатолий Куликов]

Обычный CSS с медиа-запросами точно поможет

Comments

[Александр]

Для первого и третьего варианта, это я согласен - поможет. Менять стили зависимо от размера экрана, но стили общие, а как тогда второй вариант размещения реализовать? Да и конечно не хотелось бы привязываться к ширине экрана, лучше бы непосредственно к родителю

[Rustam Bainazarov]

Александр, к родителю нет привязки через media.