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

Question

[nepster-web]

Есть 3 блока: 20% 60% 20%
Задача сделать так, чтобы при ресайте три блока уменьшались но при этом 1 и 3 блок доходили до минимальной ширины и дальше уменьшался только центральный блок.

Пример реализации:
https://jsfiddle.net/d9h4v5pp/1/

Если указать min-width, то при ресайзе браузера блоки будут сползать, как сделать так, чтобы они не ползали ?

Answer 1

[i788]

Минимальную ширину нужно рассчитать.
Для Ваших условий она будет равна:

(150px / 20%) * 100% = 750px

Update:

Упустил, что ширина среднего блока может уменьшаться до нуля.
Но произведенное вычисление пригодится.

Решение такое:

@media screen and (max-width: 749px) {
   .center {
       width: -moz-calc(100% - 300px);          
   }
}

Поддержку функции calc() можно посмотреть здесь:
caniuse.com/#feat=calc
И для обертки нужно выбрать необходимую min-width, то есть, минимальную суммарную ширину трех блоков, которая будет больше 300px.

Comments

[nepster-web]

такой вариант не подходит, так как мобильные устройства в основном меньше 750px

[i788]

nepster09:
В вопросе есть некоторое противоречие. Слово "адаптивный" предполагает, что мы можем, при необходимости, перемещать блоки, например, располагая их один под одним. С другой стороны, в первой строке вопроса написано, что "Есть 3 блока: 20% 60% 20%". Это указывает на то, что блоки по ширине (горизонтали) должны располагаться друг за другом. Если это так и блоки не должны "сползать", тогда задавайте min-width меньше 150px (для left, right ) до получения необходимой общей ширины и / или изменяйте процентное соотношение колонок (left, right, center). Например, соотношение 30%40%30% дает для охватывающего блока min-width = 500px.
min = 120px, 30%40%30% -> min = 400px

[nepster-web]

i788: да согласен. Там хитрая задумка у меня, он там нужен js. Так я вас понял, спасибо. Щас буду пробовать.

[i788]

nepster09:
Решение такое:

media screen and (max-width: 749px) {
.center {
width: -moz-calc(100% - 300px);
}
}

Поддержку функции calc() можно посмотреть здесь:
caniuse.com/#feat=calc

И для обертки нужно выбрать необходимую min-width, то есть, минимальную суммарную ширину трех блоков, которая будет больше 300px.

[nepster-web]

i788: вы уже доверяете свойству calc ? Я начал использовать ФормДату, а вот калк и флекс бокс пока не решаюсь.

[i788]

nepster09: Функция calc далеко не вчера появилась. Что смущает?

Answer 2

[Kir ---]

https://jsfiddle.net/d9h4v5pp/3/

Comments

[nepster-web]

К сожалению тупняковый вариант, если внутри разместить блок со 100%, то будет примерно вот такое: https://jsfiddle.net/d9h4v5pp/47/

[Kir ---]

nepster09: контент будет строго по центру. Но я бы сделал на flex-box данную задачу или на table если нужно поддержка ниже IE10.
Почему многие панически боятся таблиц в таких случаях, я понять не могу.

[nepster-web]

Kir ---: да я уже попробовал реализовать через таблицы. Там тоже была 1 проблема, я не знаю про одно свойство (table-layout). А что касается страха, так это пока использование flex-box. Что-то он пока не очень стабилен.

Answer 3

[Дмитрий Антонов]

Флотами сказали как сделать, остается ток javascript тут все просто. Когда .left и .right будет равняться 150px то .center будет равняться center = ширина родительского блока - 2*150px

Answer 4

[Therapyx]

У тебя получается так, что боковые блоки достигают размера в 150пх, а середина еще на столько большая, что эти блоки просто не помешаются туда. Если делать все "резиново", то надо придерживаться процентов. Иначе как уже и выше говорили, используй @media. Можно конечно и кодом заморочится, но оно того не стоит :)

Answer 5

[Андрей Федоров]

Ну для начала откажитесь от float - переделайте на display: inline-block.
Дальше, оберните ваши 3 элемента left, center и right в div, которому запретите переносы строк - white-space: nowrap.
А min-width задайте блокам по вкусу.

Comments

[nepster-web]

в inline-block есть одна особенность, он регагирует на проблемы и на font-size, когда между блоками появляется не большой отступ. Я уже как-то с этим заморачивался.

[Андрей Федоров]

ну дак есть методы:
codepen.io/aliencash/pen/VLQKMp

Answer 6

[ie6exe]

https://jsfiddle.net/bL7fe3ww/1/

Comments

[nepster-web]

overflow: hidden; к сожалению не подходит, внутри центра всплывающие блоки, они будут резаться. Но зато других косяков нет.