Используя метод плавающего позиционирования, можно легко выполнить фиксированную ширину и адаптацию одного столбца к нескольким столбцам, включая фиксированную ширину трех столбцов. Здесь нам дано новое требование: мы надеемся получить макет из трех столбцов, в котором левый столбец требует фиксированной ширины и отображается слева, правый столбец требует фиксированной ширины и отображается справа, а средний столбец требует фиксированной ширины и отображается слева. Столбец должен находиться между левым и правым столбцами. Середина столбца автоматически адаптируется к изменению расстояния между левым и правым столбцами.
Это выдвигает новые требования к макету, и этого невозможно достичь простым использованием атрибутов с плавающей запятой и процентных атрибутов. CSS в настоящее время не поддерживает достаточно точные процентные вычисления, чтобы учитывать пространство, занимаемое левым и правым столбцами. используйте 100% для среднего столбца. В качестве ширины будет использоваться ширина окна браузера, а не среднее расстояние между левым и правым столбцами, поэтому нам нужно переосмыслить эту проблему.
абсолютное позиционирование
Прежде чем приступать к такому трехколоночному макету, необходимо понять новый метод позиционирования – абсолютное позиционирование. Предыдущий метод плавающего позиционирования в основном позволяет браузеру автоматически регулировать направление плавания в соответствии с содержимым объекта. Однако, когда этот метод не может удовлетворить требования к позиционированию, для достижения этой цели необходим новый метод. CSS предоставляет другой метод, помимо плавающего позиционирования. Метод позиционирования — абсолютное позиционирование, которое достигается с помощью атрибута позиции.
Position используется для установки метода позиционирования объекта. Доступные значения: статический/абсолютный/относительный.
Для каждого объекта на странице свойство позиции по умолчанию является статическим. Если вы установите для объекта значение Position:absolute, объект выйдет из потока документа и будет перемещен в соответствии со своим положением на странице. При использовании этого атрибута вы можете использовать значения сверху, справа, снизу, слева, то есть значения расстояния в четырех направлениях сверху, справа, снизу и слева, чтобы определить конкретное положение объекта. См. следующее. CSS:
#layout {
позиция: абсолютная;
верх: 20 пикселей;
слева: 0 пикселей;
}
Если #layout использует позицию:absolute;, он станет режимом абсолютного позиционирования. В то же время при настройке top:20px; он всегда будет находиться на расстоянии 20 пикселей от верхней части окна браузера, а left:0px обеспечит; что оно находится далеко от верхней части окна браузера. Левое поле браузера составляет 0 пикселей. .
Примечание. Если для объекта установлено значение Position:absolute;, он будет существенно отделен от других объектов. Его режим позиционирования не повлияет на другие объекты, и в некотором смысле на него не повлияет плавающее позиционирование после использования абсолютного. позиционирования объект плавает на веб-странице как слой.
После того, как объект будет абсолютно позиционирован, его плавающая связь со страницей больше не будет учитываться. Вам нужно только установить значения направлений сверху, справа, снизу и слева.
В этом случае использование абсолютного позиционирования может хорошо решить поднятую нами проблему. Аналогичным образом используйте 3 элемента div, чтобы сформировать структуру из трех столбцов:
#левый {
цвет фона: #E8F5FE;
граница: сплошная 1 пиксель #A9C9E2;
высота: 400 пикселей;
ширина: 200 пикселей;
позиция: абсолютная;
верх: 0 пикселей;
слева: 0 пикселей;
}
#верно {
цвет фона: #FFE7F4;
граница: сплошная 1 пиксель #F9B3D5;
высота: 400 пикселей;
ширина: 200 пикселей;
позиция: абсолютная;
верх: 0 пикселей;
справа: 0 пикселей;
}
Таким образом, левый столбец будет отображаться близко к левому краю налево: 0px;, а правый столбец будет отображаться справа: 0px, так что правый столбец будет отображаться справа, а #center внутри. в середине будут использоваться обычные стили CSS:
#центр {
цвет фона: #F2FDDB;
граница: сплошная #A5CF3D толщиной 1 пиксель;
высота: 400 пикселей;
поле справа: 202 пикселей;
поле слева: 202 пикселей;
}
Для #center нам не нужно устанавливать плавающий метод. Нам нужно только разрешить ему иметь левое поле и всегда сохранять ширину #lef и #right. Это обеспечивает адаптивную ширину 202 пикселя с обеих сторон. Левая и правая стороны имеют адаптивную ширину 202 пикселя. Расстояние позволяет отображать #left и #right в этом пространстве, что соответствует требованиям.