En CSS, hay dos formas de implementar el diseño de columnas. El primer método es utilizar el posicionamiento absoluto (posicionamiento absoluto) entre las cuatro opciones de posicionamiento CSS (absoluto, estático, relativo y fijo), que puede eliminar un elemento en el documento de su posición original y reubicarlo en cualquier lugar que desee. El segundo es utilizar el concepto flotante en CSS.
Se puede utilizar posicionamiento absoluto o flotación para lograr efectos de columna. Los dos pueden usarse de forma independiente o combinarse para complementarse entre sí.
1. Posicionamiento absoluto La ventaja del posicionamiento absoluto es que podemos controlar con precisión la posición de cualquier elemento, sin necesidad de conjeturas ni suerte. Debido a que un elemento en posición absoluta se elimina por completo del flujo normal de documentos sin dejar rastro, no tiene ningún impacto en otros elementos.
Entonces, intentemos cómo implementar el siguiente diseño usando posicionamiento absoluto.
Este es un diseño de tres columnas y está centrado. Entre ellas, la columna A es la columna de contenido principal y las columnas B y C son columnas laterales. En primer lugar, no podemos utilizar directamente el posicionamiento absoluto para colocar las tres columnas A, B y C en la posición central, porque la resolución del monitor de cada persona es diferente. El efecto de centrado del posicionamiento en un monitor con una resolución de 1024X768 será. no funciona en otras resoluciones. El efecto que se ve en un monitor de alta velocidad definitivamente no estará centrado. Entonces, ¿cómo solucionar este problema?
Afortunadamente, existe una característica extremadamente útil en el modelo de posicionamiento absoluto, es decir: si el contenedor de un elemento absolutamente posicionado también ha sido posicionado, entonces los valores superior e izquierdo especificados por el elemento no se basarán en el elemento raíz. html del documento (también es la esquina superior izquierda de la ventana del navegador), pero el desplazamiento se calculará en función de la esquina superior izquierda de su contenedor. En otras palabras, es decir: el contenedor posicionado actuará como punto de partida para el posicionamiento absoluto de todos los elementos que contiene.
Por lo tanto, al utilizar esta función, agregamos un contenedor D fuera de las columnas A, B y C, como se muestra a continuación:
Luego, centramos el contenedor D y le agregamos un atributo: posición: relativa. De esta manera, usamos el posicionamiento absoluto para posicionar los valores superior e izquierdo de A, B y C. Las posiciones de A, B. y C se basará en el contenedor D. Se calcula la posición de la esquina superior izquierda, de modo que se pueda lograr el efecto de centrado de tres columnas deseado.
Sin embargo, nuestro diseño de uso común no es tan simple. Además de tres columnas, también necesitamos un encabezado y un pie de página, como se muestra a continuación:
En este momento, usar un diseño de posición absoluta no funcionará porque el elemento de posición absoluta se eliminará por completo del flujo del documento. En este momento, el pie de página estará al lado del encabezado y se mostrará debajo del encabezado.
Si debemos utilizar el posicionamiento absoluto, debemos conocer la altura de cada una de las tres columnas de antemano y luego colocar el pie de página en función de la columna más alta. Si no se puede determinar la longitud del texto en cualquier columna, además de usar JavaScript, solo podemos abandonar la idea del posicionamiento absoluto e invertir en la adopción del diseño flotante.
2. Flotar
La intención original de flotar es hacer flotar la imagen insertada en el artículo hacia la izquierda o hacia la derecha, de modo que el texto debajo de la imagen se ajuste automáticamente a su alrededor, de modo que no haya un gran espacio en blanco a la izquierda o lado derecho de la imagen.
Aunque la sintaxis de flotante es simple, no es tan fácil de dominar. Demos un ejemplo de cómo usar la flotación en el diseño. De manera similar, implementaremos un diseño de tres columnas con pie de página. Como se muestra a continuación:
¿Cómo utilizar float para lograr tal efecto? De hecho, es muy simple:
1. Establezca el ancho de E y centre E.
2. Establezca el ancho de A, B y C, y flote A, B y C hacia la izquierda respectivamente.
3. Establezca el espacio libre
.atributo para el pie de página Lo que
debe explicarse es que el diseño flotante aún sigue el flujo normal del documento, por lo que en comparación con el posicionamiento absoluto, la posición de la declaración del elemento en el archivo fuente HTML es particularmente importante cuando se coloca de forma flotante. Por supuesto, la forma más sencilla de resolver este problema es intercambiar el orden de declaración de la columna izquierda y la columna derecha en el archivo fuente. También hay formas de lograr el mismo diseño sin intercambiar el orden de las columnas. el uso de una comparación Manera oscura de utilizar valores de margen negativos. En circunstancias normales, lo más probable es que la gente opte por intercambiar el orden de las declaraciones en las columnas izquierda y media del archivo fuente.