Usando el posicionamiento flotante, el ancho fijo y la adaptabilidad de una columna a varias columnas se pueden completar básicamente simplemente, incluido el ancho fijo de tres columnas. Aquí hemos presentado un nuevo requisito, con la esperanza de tener un diseño de tres columnas, donde la columna izquierda requiere un ancho fijo y se muestra a la izquierda, la columna derecha requiere un ancho fijo y se muestra a la derecha y el medio La columna debe estar en la columna izquierda y la columna derecha. Esto presenta un nuevo requisito para el diseño, y simplemente el uso del atributo FLOAT y el atributo porcentual no se puede lograr actualmente si el 100% no admite el cálculo de los porcentajes para tener en cuenta el marcador de posición de las columnas izquierda y derecha. Utilizado para la columna media para el ancho, usará el ancho de la ventana del navegador, en lugar del espacio medio entre las columnas izquierda y derecha, por lo que necesitamos repensar este problema. #disposición { Si #Layout usa la posición: Absoluto; El margen izquierdo es 0px. . De esta manera, la columna izquierda se mostrará en el lado izquierdo del borde izquierdo, mientras que la columna derecha se mostrará en el lado derecho a la derecha: 0px; Para #center, ya no necesitamos establecer su método flotante. La distancia de los lados izquierdo y derecho solo permite que #left y #right se muestren en este espacio, logrando así los requisitos.
Posicionamiento absoluto
Antes de comenzar un diseño de tres columnas, es necesario comprender un nuevo método de posicionamiento: posicionamiento absoluto. El método de posicionamiento flotante anterior se ajusta automáticamente por el navegador de acuerdo con el contenido del objeto. El posicionamiento y el posicionamiento absoluto se logra utilizando el atributo de posición.
Posición utilizada para establecer los valores disponibles para colocar el objeto: estática/absoluta/relativa
Para cada objeto de la página, la propiedad de posición predeterminada es estática. Si establece el objeto en posición: absoluto, el objeto se separará de la secuencia de documentos y se reposicionará de acuerdo con la ubicación de toda la página. Al usar esta propiedad, puede usar arriba, derecha, abajo, izquierda, es decir, el valor de distancia de las cuatro direcciones de la parte superior, derecha, inferior e izquierda para determinar la posición específica del objeto.
Posición: Absoluto;
Arriba: 20px;
Izquierda: 0px;
}
Nota: Si un objeto se establece en la posición: Absoluto; Posicionamiento absoluto, el objeto flota en la página web como una capa.
Después de un posicionamiento absolutamente, el objeto ya no se considerará con la relación flotante en la página.
En este caso, el uso de posicionamiento absoluto puede resolver el problema que planteamos bien. Del mismo modo, usamos 3 divs para formar nuestras tres estructuras de columna:
#izquierda {
Color de fondo: #E8F5FE;
borde: 1px sólido #a9c9e2;
Altura: 400px;
Ancho: 200px;
Posición: Absoluto;
arriba: 0px;
Izquierda: 0px;
}
#bien {
Color de fondo: #FFE7F4;
borde: 1px sólido #f9b3d5;
Altura: 400px;
Ancho: 200px;
Posición: Absoluto;
arriba: 0px;
Derecha: 0px;
}
#centro {
Color de fondo: #F2FDDB;
borde: 1px sólido #a5cf3d;
Altura: 400px;
margen-derecha: 202px;
margen-izquierda: 202px;
}