Используя плавающее позиционирование, фиксированная ширина и адаптивность от одного столбца до нескольких столбцов могут быть в основном завершены, включая фиксированную ширину трех столбцов. Здесь мы выдвинули новое требование, надеясь получить макет с тремя столбцами, где левый столбец требует фиксированной ширины и отображается слева, правая столбец требует фиксированной ширины и отображается справа, а середина Столбец должен быть в левом столбце, а в правом столбце. Это выдвигает новое требование для макета, и простое использование атрибута Float, и процентный атрибут не может быть достигнут Используемый для среднего столбца для ширины, он будет использовать ширину окна браузера, а не среднее расстояние между левым и правым столбцами, поэтому нам нужно переосмыслить эту проблему. #макет { Если #layout использует позицию: Absolute; Левый край составляет 0PX. Полем Таким образом, левый столбец будет отображаться в левой части левого края, в то время как правый столб будет отображаться справа: 0PX; Для #Center нам больше не нужно устанавливать его плавающий метод. Расстояние левой и правой стороны просто позволяет отображать #left и #right в этом пространстве, таким образом, достигая требований.
Абсолютное позиционирование
Прежде чем начать такую компоновку с тремя столбцами, необходимо понять новый метод позиционирования - абсолютное позиционирование. Предыдущий метод плавания в основном регулируется браузером в соответствии с содержанием объекта. позиционирование и абсолютное позиционирование достигается с использованием атрибута позиции.
положение, используемое для установки доступных значений для позиционирования объекта: статический/абсолютный/относительный
Для каждого объекта на странице свойство по умолчанию является статичным. Если вы установите объект в позицию: Absolute, объект будет отделен от потока документа и перемещен в соответствии с местоположением всей страницы. При использовании этого свойства вы можете использовать верхнюю часть, вправо, внизу, влево, то есть значение расстояния четырех направлений верхнего, правого, нижнего и слева, чтобы определить конкретное положение объекта.
позиция: абсолютно;
Верх: 20px;
слева: 0px;
}
Примечание: если объект установлен на позицию: абсолютно; Абсолютное позиционирование, объект плавает на веб -странице, как слой.
После абсолютно позиционирования объект больше не будет рассматриваться с плавающими отношениями на странице.
В этом случае использование абсолютного позиционирования может решить проблему, которую мы подняли хорошо. Точно так же мы используем 3 DOV для формирования наших трех конструкций столбцов:
#левый {
фоновый цвет: #e8f5fe;
Граница: 1PX SOLID #A9C9E2;
Высота: 400px;
Ширина: 200px;
позиция: абсолютно;
Верх: 0px;
слева: 0px;
}
#верно {
фоновый цвет: #ffe7f4;
Граница: 1PX SOLID #F9B3D5;
Высота: 400px;
Ширина: 200px;
позиция: абсолютно;
Верх: 0px;
Справа: 0px;
}
#Center {
фоновый цвет: #f2fddb;
Граница: 1px solid #a5cf3d;
Высота: 400px;
Право маржи: 202px;
Мяботая маржа: 202px;
}