CSS -макет — ширина и максимальная ширина
Использование ширины, максимальной ширины и поля: авто;
Как упоминалось в предыдущей главе; блочный элемент всегда занимает всю доступную ширину (растягивается влево и вправо, насколько это возможно).
Установка widthблочного элемента предотвратит его растяжение до краев контейнера. Затем вы можете установить для полей значение auto, чтобы центрировать элемент по горизонтали внутри его контейнера. Элемент займет указанную ширину, а оставшееся пространство будет поровну разделено между двумя полями:
Примечание. Проблема, описанная <div>выше, возникает, когда окно браузера меньше ширины элемента. Затем браузер добавляет на страницу горизонтальную полосу прокрутки.
Использование max-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;
}