nepster-web
@nepster-web

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

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

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

Если указать min-width, то при ресайзе браузера блоки будут сползать, как сделать так, чтобы они не ползали ?
  • Вопрос задан
  • 697 просмотров
Пригласить эксперта
Ответы на вопрос 6
@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.
Ответ написан
Sadist07
@Sadist07
Верстальщик, Недо дизайнер
Флотами сказали как сделать, остается ток javascript тут все просто. Когда .left и .right будет равняться 150px то .center будет равняться center = ширина родительского блока - 2*150px
Ответ написан
Комментировать
Therapyx
@Therapyx
Data Science
У тебя получается так, что боковые блоки достигают размера в 150пх, а середина еще на столько большая, что эти блоки просто не помешаются туда. Если делать все "резиново", то надо придерживаться процентов. Иначе как уже и выше говорили, используй @media. Можно конечно и кодом заморочится, но оно того не стоит :)
Ответ написан
Комментировать
aliencash
@aliencash
Партизан
Ну для начала откажитесь от float - переделайте на display: inline-block.
Дальше, оберните ваши 3 элемента left, center и right в div, которому запретите переносы строк - white-space: nowrap.
А min-width задайте блокам по вкусу.
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы