Почему max-width не отменяет минимальную ширину?

Я пытаюсь создать отзывчивый макет, в котором две коробки сидят рядом друг с другом, если размер экрана позволяет это, и иметь их ниже друг друга, если это не так. Если ящики находятся ниже друг друга, я бы хотел, чтобы они были сосредоточены на родителях. Я создал jsfiddle продемонстрировать проблему:Почему max-width не отменяет минимальную ширину?

http://jsfiddle.net/leongersen/KsU23/

width: 50%; 
min-width: 350px; 
max-width: 100%;

Попробуйте изменить размер «результата» панель ниже 350px. Элементы будут пересекаться с родителями.

Мой вопрос:

Почему не указана максимальная ширина честь, даже если он приходит после мин-ширина?

Я мог бы, конечно, использовать медиа-запрос, но я хотел бы знать, почему это происходит.

источник

2013-04-17 Lg102

Я не вижу проблемы. Они доходят до 50%, если я делаю это шире, они сохраняются на уровне 50%, если я делаю это меньше 700 пикселей, тогда они сохраняют минимальную ширину 350 пикселей и обертываются (вторая идет в новую строку). Что вы ожидаете? –

Красные прямоугольники перекрывают родительский элемент, если он становится меньше 350 пикселей. – Lg102

@FranciscoZarabozo - Lg102, похоже, ожидает, что максимальная ширина 100% займет верх, когда размер родителя меньше суммы минимальной ширины дочерних элементов. своего рода консультативная минимальная ширина, где это возможно – CodeMonkey

Из-за CSS standards:

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

Предварительный б ширина вычисляется (без 'min-width' и 'max-width'), следуя правилам в разделе «Расчет ширины и полей» выше.

Если предварительная используемая ширина больше 'max-width', правила выше применяются снова, но на этот раз с использованием вычисленное значение 'max-width' как вычисленное значение для 'width'.

Если результирующая ширина меньше «min-width», правила выше применяются снова, но на этот раз с использованием значения «min-width» как вычисленное значение для «width».

Как таковая минимальная ширина всегда «выигрывает». В пределах определенного правила CSS в любом случае нет приоритета, все значения применяются атомарно. Приоритет возникает только тогда, когда разные правила применяются к одному и тому же элементу, и даже тогда он основан на специфичности перед рассмотрением порядка файлов.

источник

2013-04-17 15:15:41

Приоритет возникает только тогда, когда * то же правило * применяется к элементу несколько раз. то есть '.foo {bar: fizz; bar: buzz; } 'последнее определение имеет приоритет. В этом примере 'min-width' и' max-width' являются разными правилами, поэтому приоритет не входит в него. – zzzzBov

Это действительно не приоритет. Когда * объявление * дублируется в * правиле *, это просто перезапись того же значения, полученного в результате последовательного разбора. Результирующие правила (с правилом, являющимся селектором и набором деклараций) могут иметь приоритет, основанный на специфичности селектора, или если 2 правила одинаково специфичны, эффект «каскадирования» CSS вступает в игру, и последнее определение рассматривается более конкретно. –

Мое мнение заключалось в том, что ваше сообщение гласит: «Приоритет возникает только тогда, когда все правила применяются к одному и тому же элементу», когда это должно быть «Приоритет возникает только тогда, когда одно и то же правило стиля применяется к одному и тому же элементу» – zzzzBov

Почему max-width не отменяет минимальную ширину?

ответ

Смежные вопросы