CSS Максимальная ширина
Используя width, max-width и margin: auto;
Как уже упоминалось в предыдущей главе; блочный элемент всегда занимает всю ширину доступного (простирается влево и вправо насколько это возможно).
Установка width для элемента уровня блока предохранит его от растяжения к краям контейнера.
Затем, вы можете подключить поля auto, чтобы установить элемент по горизонтали по центру внутри контейнера.
Элемент будет принимать указанную ширину, а остальное пространство будет разделено поровну между двумя полями:
<div> имеет ширину 500 пикселей и поле установлено автоматически.Примечание: Проблема происходит выше в примере с <div>,
когда окно браузера меньше, чем ширина элемента. Затем браузер добавляет горизонтальную полосу прокрутки на странице
Используя max-width вместо width, в этой ситуации,
улучшит управляемость браузера маленьких окон.
Это важно при создании сайта для использования на небольших устройствах:
Совет: Измените размер окна браузера меньше, чем 500 пикселей в ширину,
чтобы увидеть разницу между двумя <div>!
Пример двух <div>:
Пример
div.ex1 {
width: 500px;
margin: auto;
border: 3px solid #73AD21;
}
div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
}
Попробуйте сами »