Utilizando el método de posicionamiento flotante, el ancho fijo y la adaptación de una columna a varias columnas se pueden completar básicamente fácilmente, incluido el ancho fijo de tres columnas. Aquí se nos da un nuevo requisito, con la esperanza de tener un diseño de tres columnas, en el que la columna de la izquierda requiere un ancho fijo y se muestra a la izquierda, la columna de la derecha requiere un ancho fijo y se muestra a la derecha, y la columna del medio La columna debe estar entre las columnas izquierda y derecha. El centro de la columna se adapta automáticamente al cambio en el espacio entre las columnas izquierda y derecha.
Esto plantea un nuevo requisito para el diseño y no se puede lograr simplemente usando atributos flotantes y atributos de porcentaje. CSS actualmente no admite cálculos de porcentaje que sean lo suficientemente precisos como para tener en cuenta el espacio ocupado por las columnas izquierda y derecha. use 100% para la columna del medio Para el ancho, usará el ancho de la ventana del navegador en lugar del espacio medio entre la columna de la izquierda y la columna de la derecha, por lo que debemos repensar este problema.
posicionamiento absoluto
Antes de comenzar con un diseño de tres columnas de este tipo, es necesario comprender un nuevo método de posicionamiento: el posicionamiento absoluto. El método de posicionamiento flotante anterior permite principalmente al navegador ajustar automáticamente la dirección flotante de acuerdo con el contenido del objeto. Sin embargo, cuando este método no puede cumplir con los requisitos de posicionamiento, se necesita un nuevo método para lograrlo. CSS proporciona otro método además del posicionamiento flotante. El método de posicionamiento es el posicionamiento absoluto, que se logra mediante el atributo de posición.
La posición se utiliza para establecer el método de posicionamiento del objeto. Valores disponibles: estático/absoluto/relativo.
Para cada objeto de la página, la propiedad de posición predeterminada es estática. Si configura un objeto en posición:absoluta, el objeto saldrá del flujo del documento y será reposicionado de acuerdo con su posición en toda la página. Al usar este atributo, puede usar arriba, derecha, abajo, izquierda, es decir, los valores de distancia en las cuatro direcciones de arriba, derecha, abajo e izquierda, para determinar la posición específica del objeto. Consulte lo siguiente. CSS:
#diseño {
posición:absoluta;
arriba: 20px;
izquierda: 0px;
}
Si #layout usa position:absolute;, se convertirá en modo de posicionamiento absoluto. Al mismo tiempo, al configurar top:20px;, siempre estará a 20 px de la parte superior de la ventana del navegador, mientras que left:0px; que está lejos de la parte superior de la ventana del navegador. El margen izquierdo del navegador es 0px. .
Nota: Si un objeto se establece en posición: absoluta; estará esencialmente separado de otros objetos. Su modo de posicionamiento no afectará a otros objetos, ni se verá afectado por el posicionamiento flotante de otros objetos. posicionamiento, el objeto flota en la página web como una capa.
Una vez que el objeto esté absolutamente posicionado, ya no se considerará su relación flotante con la página. Solo necesita establecer los valores de las direcciones superior, derecha, inferior e izquierda del objeto.
En este caso, utilizar el posicionamiento absoluto puede resolver bien el problema que planteamos. De manera similar, use 3 divs para formar nuestra estructura de tres columnas:
#izquierda {
color de fondo: #E8F5FE;
borde: 1px sólido #A9C9E2;
altura: 400 px;
ancho: 200px;
posición: absoluta;
arriba: 0px;
izquierda: 0px;
}
#bien {
color de fondo: #FFE7F4;
borde: 1px sólido #F9B3D5;
altura: 400 px;
ancho: 200px;
posición: absoluta;
arriba: 0px;
derecha: 0px;
}
De esta manera, la columna de la izquierda se mostrará cerca del borde izquierdo por left:0px;, mientras que la columna de la derecha se mostrará por right:0px; de modo que la columna de la derecha se mostrará desde la derecha y el #center en; el medio usará estilos CSS ordinarios:
#centro {
color de fondo: #F2FDDB;
borde: 1px sólido #A5CF3D;
altura: 400 px;
margen derecho: 202px;
margen izquierdo: 202px;
}
Para #center, no necesitamos configurar su método flotante. Solo necesitamos dejar que tenga un margen izquierdo y mantener siempre el ancho de #lef y #right. Esto logra un ancho adaptativo de 202 px en ambos lados. Los lados izquierdo y derecho tienen un ancho adaptable de 202 px. La distancia solo permite que #left y #right se muestren en este espacio, cumpliendo así los requisitos.