Почему min-width и max-width не работают так, как я ожидал?
Я пытаюсь настроить макет страницы CSS, используя минимальную ширину и максимальную ширину. Чтобы упростить задачу, я сделал эту тестовую страницу. Я пробую это в последних версиях Firefox и Chrome с теми же результатами.
div div.a div.b (Giant block of filler text here) (Giant block of filler text here) - Когда браузер развернут на максимум, элементы div располагаются рядом, каждый шириной 400 пикселей: их максимальная ширина.
- Уменьшите окно браузера, и они оба уменьшатся до 200 пикселей: их минимальная ширина
- Дальнейшее сжатие браузера на них не влияет
Вот что на самом деле происходит, начиная с шага 2:
- Уменьшите окно браузера, и как только они не смогут располагаться бок о бок при максимальной ширине, второй элемент div опустится ниже первого.
- Дальнейшее сжатие браузера делает их все уже и уже, настолько маленьким, насколько я могу сделать окно
- Что max-width означает, что элемент скорее прыгнет вниз в макете, чем опустится ниже своей максимальной ширины?
- Что min-width означает, что элемент с радостью станет уже, если окно браузера продолжит сжиматься?
- Есть ли способ добиться того, чего я хочу: расположить эти элементы бок о бок, счастливо уменьшаясь, пока не достигнут 200 пикселей каждый, и только затем настроить макет так, чтобы второй опускался вниз?
Что я делаю не так?
3 ответы
Причина, по которой они «выпадают», связана с изменением размера их родительского элемента (в данном случае body ). Положите обертку div вокруг них шириной 400 пикселей или более, и вы можете держать их рядом друг с другом.
Обернул div вокруг них обоих и дал ему одно правило: width: 900px; . Теперь они никогда не сидят рядом. Пытался добавить левый поплавок на случай, если он рушится. Без изменений. — Натан Лонг
Я думаю (и это только из моего личного опыта), что max-width относится к содержимому внутри div. Таким образом, если бы внутри div было только 1 слово, его ширина была бы 200 пикселей, но если бы в div было 300 слов, ширина была бы 400 пикселей.
Я думаю, что есть способ сделать то, что вы хотите сделать. Эта статья может относиться к этому:
Чтобы хоть немного ответить:
min-width действительно о том, когда браузер должен отображать горизонтальную полосу прокрутки для страницы.
В то время как эксперименты с поплавками действительно работают хорошо только тогда, когда они имеют width установить, поэтому я бы использовал родителя div с установленной минимальной и максимальной шириной и добавить width: 50% к дочерним div. Это решает все ваши проблемы, кроме изменения макета div. Для этого я бы, вероятно, сослался на javascript.
div.cont div.a, div.b div.a div.b Morbi malesuada nulla nec purus convallis consequat. Vivamus id mollis quam. Morbi ac commodo nulla. Заставить работать min-width,max-width в %
Почему не работает min-width:90%; или как можно обойти эту проблему?Если минималка указана в px-все работает.Спасибо Вам.
Адаптация дизайна.Свойства min-width и max-width
Всем привет.Возникла проблема в понимании свойств min-width и max-width.Если использовать в @media.
Адаптивная вёрстка, min-width или max-width?
В bootstrap 3 применяется сетка на основе media queries, а именно @media (min-width), НО. .
min-width max-width
Помогите разобраться. Резиновый сайт с минимальной и максимальной шириной сайта. При просмотре.
задайте родительским элементам ширину (body,html), чтобы браузер смог пересчитать в пиксели и тогда уже он сможет взять ваши 90%
родителем таблици есть body,html
Даже если огорнуть таблицу еще в 1 див, то ничего не поменяется.
min-width/max-width не применим к таблицам, ибо те растягиваюся по своим правилам!
Поясни, зачем могло именно min-width понадобиться в процентах? И чем просто width не устраивает?
10.4 Минимальная и максимальная ширина: ‘min-width’ и ‘max-width’
‘min-width’
Значение: | | inherit
Начальное: зависит от ПА
Применяется: ко всем элементам, за исключением незамещаемых инлайн элементов и элементов таблицы
Наследуется: нет
Процентное: относительно ширины содержащего блока
Носитель: визуальный
‘max-width’
Значение: | | none | inherit
Начальное: none
Применяется: ко всем элементам, за исключением незамещаемых инлайн элементов и элементов таблицы
Наследуется: нет
Процентное: относительно ширины содержащего блока
Носитель: визуальный
Эти два свойства позволяют авторам ограничить ширину бокса определёнными рамками.
Значения имеют следующий смысл:
Специфицирует фиксированную минимальную и максимальную вычисленную ширину.
Специфицирует проценты для определения вычисленного значения. Проценты высчитываются относительно ширины содержащего блока генерируемого бокса.
none
(Только для ‘max-width’) Нет ограничений на ширину бокса.
Следующий алгоритм описывает, как эти два свойства воздействуют на вычисленное значение свойства ‘width’:
Ширина вычисляется (без ‘min-width’ и ‘max-width’) по вышеприведённым правилам «Вычисление ширины и полей».
Если вычисленное значение ‘min-width’ больше, чем значение ‘max-width’, то ‘max-width’ устанавливается в значение ‘min-width’.
Если вычисленная ширина больше, чем ‘max-width’, вышеприведённые правила применяются вновь, но на этот раз с использованием значения ‘max-width’ как специфицированного для ‘width’.
Если вычисленная ширина меньше, чем ‘min-width’, вышеприведённые правила применяются вновь, но на этот раз с использованием значения ‘min-width’ как специфицированного для ‘width’.
ПА может определить неотрицательное минимальное значение для свойства ‘min-width’, которое (значение) может варьироваться от элемента к элементу и даже зависеть от других свойств. Если ‘min-width’ выходит за нижнюю границу этого лимита из-за того, что было установлено явно, или из-за того, что оно ‘auto’ и вышеприведённые правила сделают его слишком маленьким, ПА может использовать минимальное значение как вычисленное значение.
10.7 Минимальная и максимальная высота: ‘min-height’ и ‘max-height’
Иногда необходимо ограничить высоту элементов определёнными рамками. Два свойства выполняют эту функцию:
‘min-height’
Значение: | | inherit
Начальное: 0
Применяется: ко всем элементам, за исключением незамещаемых инлайн-элементов и элементов таблицы
Наследуется: нет
Процентное: относительно высоты содержащего блока
Носитель: визуальный
‘max-height’
Значение: | | none | inherit
Начальное: none
Применяется: ко всем элементам, за исключением незамещаемых инлайн-элементов и элементов таблицы
Наследуется: нет
Процентное: относительно высоты содержащего блока
Носитель: визуальный
Эти два свойства позволяют авторам ограничить высоту боксов определённым диапазоном. Значения имеют следующий смысл:
Специфицирует фиксированный минимум и максимум вычисленной высоты.
Специфицирует проценты для определения вычисленного значения. Проценты высчитываются относительно высоты содержащего блока генерируемого бокса. Если высота содержащего блока не специфицирована явно (т.е. зависит от высоты содержимого), процентные значения интерпретируются так же, как ‘auto’.
none
(Только для ‘max-height’) Высота бокса не ограничена.
Следующий алгоритм описывает, как эти два свойства вводят вычисленное значение свойства ‘height’:
Высота вычисляется (без ‘min-height’ и ‘max-height’) по вышеприведённым правилам в «Вычислении высоты и полей».
Если вычисленное значение ‘min-height’ больше значения ‘max-height’, ‘max-height’ устанавливается в значение ‘min-height’.
Если вычисленная высота больше, чем ‘max-height’, вновь применяются вышеприведённые правила, но на этот раз с использованием значения ‘max-height’ как специфицированного значения для ‘height’.
Если вычисленная высота меньше, чем ‘min-height’, вновь применяются вышеприведённые правила, но на этот раз с использованием значения ‘min-height’ как специфицированного значения для ‘height’.
Не работает min-width
Мож очень простой вопрос? Сорри! Не работает min-width. Для примера взял код из http://htmlbook.ru/css/min-width, еще с флоатами. В консоли задаю ширину 200рх но скролл не появляется. Шо не так? Добавил max-width. Он работает, где-то встречал шо это парные свойства?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
html> head> meta charset="utf-8"> title>min-widthtitle> style> #container max-width:1200px; min-width: 420px; /* Минимальная ширина контейнера */ border:1px solid blue; overflow:hidden; } #col1 background-color: #fc0; /* Цвет фона колонки */ padding: 5px; /* Поля вокруг текста */ float: left; /* Обтекание по правому краю */ width: 150px; /* Ширина левой колонки */ } #col2 background-color: #c0c0c0; /* Цвет фона колонки */ padding: 5px; /* Поля вокруг текста */ width: 250px; /* Ширина правой колонки */ float: left; /* Обтекание по правому краю */ } style> head> body> div id="container"> div id="col1">Колонка 1div> div id="col2">Колонка 2div> div> body> html>
Медиазапросы min-width и min-device-width
Подскажите, почему: @media only screen and (max-width : 1170px), only screen and.
скажите, почему не работает min-width в IE6?
скажите, почему не работает min-width в IE6? <!DOCTYPE HTML> <head> <meta charset="utf-8">.
Адаптация дизайна.Свойства min-width и max-width
Всем привет.Возникла проблема в понимании свойств min-width и max-width.Если использовать в @media.
Адаптивная вёрстка, min-width или max-width?
В bootstrap 3 применяется сетка на основе media queries, а именно @media (min-width), НО. .