Свойство min-width - минимальная ширина элемента
Свойство min-width устанавливает минимальную
ширину элемента. Значением свойства служат
любые единицы
для размеров либо ключевое слово none,
означающее отсутствие значения.
Обычно задается для элемента с плавающей
шириной (ширина задана в процентах или не
задана вообще, а элемент по ширине раздвигается
своим содержимым). Если ширина элемента задана
в процентах - при уменьшении окна браузера
она будет уменьшаться, пока не достигнет
значения min-width.
Синтаксис
селектор {
max-width: значение;
}
Пример
В данном примере ширина составляет процент
от ширины родителя. Уменьшите окно браузера
по ширине, и контейнер тоже уменьшится, чтобы
подстроиться под ширину окна браузера. Однако
он будет уменьшаться только до величины,
определенной в min-width, это 400px.
Как только контейнер достигнет этой ширины
- он перестанет уменьшаться:
<div id="elem"></div>
#elem {
width: 70%;
min-width: 400px;
height: 300px;
border: 1px solid black;
}
:
Пример
В данном примере ширина контейнера ограничена
с обоих сторон: он не сможет стать больше
900px и меньше 400px:
<div id="elem"></div>
#elem {
width: 70%;
min-width: 400px;
max-width: 900px;
height: 100px;
border: 1px solid black;
}
:
Смотрите также
-
свойство
max-width,
которое задает максимальную ширину элемента -
свойство
max-height,
которое задает максимальную высоту элемента -
свойство
min-height,
которое задает минимальную высоту элемента