Diseño frontal de tres columnas

        En el desarrollo front-end, el diseño de tres columnas es un escenario muy básico. Este artículo resume los métodos y las ventajas y desventajas de implementar el diseño de tres columnas, así como algunos métodos de diseño relacionados con el diseño de tres columnas.

        Los requisitos para el diseño de tres columnas son generalmente:

              1. El ancho de los lados izquierdo y derecho es fijo, y el ancho medio es adaptable.

              2. El contenido de la columna central se puede mostrar completamente.

      Esta situación se puede lograr con posicionamiento y flotación.

        1. Uso de posicionamiento El uso de posicionamiento es principalmente para posicionar las columnas izquierda y derecha a los lados izquierdo y derecho mediante el desplazamiento de posicionamiento absoluto.

#middle { 
 background: deeppink; 
 padding: 0 200px; // Esta oración debe agregarse; de ​​lo contrario, parte del contenido de la columna central estará cubierta por la columna izquierda 
} 
#left { 
 position: absolute; 
 left: 0; 
 top: 0; 
 ancho: 200 px; 
 fondo: rosa; 
} 
#right { 
 posición: absoluta; 
 derecha: 0; 
 arriba: 0; 
 ancho: 200 px; 
 fondo: rosa; 
}

Efecto:

 2. Use flotante. En este caso, no necesita configurar el relleno para la columna central, el contenido se puede mostrar completamente. Debido a que la flotación solo eleva el nivel medio, cuando los elementos izquierdo y derecho están flotando, los siguientes elementos se completarán. Dado que solo se eleva el nivel medio, solo se levantará la mitad inferior de los siguientes elementos y la mitad superior no La mitad superior de un elemento está relacionada con el texto y la mitad inferior está relacionada con el modelo, por lo tanto, la columna del medio se puede mostrar completamente sin establecer otros estilos para el medio.

Nota: Cuando se usa flotante, el elemento DOM correspondiente al medio debe estar en la parte inferior.

# izquierda, # derecha { 
 ancho: 200px; 
 fondo: rosa; 
} 
#left { 
 float: left; 
} 
#right { 
 float: right; 
} 
#middle { 
 background: deeppink; 
}

Efecto:

 

Problemas en dos casos: 1. Cuando se usa el posicionamiento para reducir la ventana, ocurrirán problemas (relacionados con el bloque de posicionamiento incluido); 

                              2. Cuando se utiliza flotante, porque la columna central corresponde al elemento DOM al final de la estructura HTML, porque también se carga al final, puede afectar la experiencia del usuario;

                              3. Ambos métodos tienen un problema común, es decir, cuando cambia la altura de una de las columnas, las otras dos columnas no cambiarán en consecuencia, y el efecto visual es particularmente feo;

En respuesta a los problemas anteriores, las soluciones de diseño correspondientes también parecen resolver estos problemas:

1. Diseño de pseudocontorno, este método de diseño realiza el diseño de contorno visualmente, pero en realidad no es un diseño de contorno;

#wrap { 
 ancho: 750px; 
 borde: 1px sólido; 
 margen: 0 automático; 
 desbordamiento: oculto; 
} 
#wrap .left { 
 float: left; 
 ancho: 200 px; 
 fondo: rosa; 
 fondo acolchado: 1000 px; 
 margen inferior: -1000px; 
} 
#wrap .right { 
 float: left; 
 ancho: 500 px; 
 fondo: rosa intenso; 
 fondo acolchado: 1000 px; 
 margen inferior: -1000px; 
} 
.clearfix { 
 * zoom: 1; 
} 
.clearfix: after { 
 content: ""; 
 bloqueo de pantalla; 
 Limpia los dos; 
}

 

2. El diseño del Santo Grial para darse cuenta de que la columna central se carga primero;

 

 

#content { 
 desbordamiento: oculto; 
 relleno: 0 200px; 
} 
# encabezado, # pie de página { 
 altura: 20 px; 
 alinear texto: centro; 
 borde: 1px solidpink sólido; 
 fondo: gris; 
} 
#content .middle, # content .left, # content .right { 
 padding-bottom: 10000px; 
 margen inferior: -10000px; 
} 
#content .middle { 
 float: left; 
 ancho: 100%; 
 fondo: rosa; 
 / * relleno: 0 200 px; * / 
} 
#contenido .left { 
 posición: relativo; 
 izquierda: -200px; 
 margen izquierdo: -100%; 
 flotador izquierdo; 
 ancho: 200 px; 
 fondo: amarillo; 
}
#content .right {
 posición: relativa; 
 derecha: -200px; 
 margen izquierdo: -200px; 
 flotador izquierdo; 
 ancho: 200 px; 
 fondo: amarillo; 
} 
.clearfix { 
 * zoom: 1; 
} 
.clearfix: after { 
 content: ""; 
 bloqueo de pantalla; 
 Limpia los dos; 
}

3. El diseño de doble ala también es el primero en cargar la columna central

 

# encabezado, # pie de página { 
 borde: 1px sólido; 
 fondo: gris; 
 alinear texto: centro; 
} 
#content .middle, # content .left, # content .right { 
 height: 50px; 
 altura de línea: 50 px; 
 flotador izquierdo; 
} 

/ * 双飞 翼 布局 * / 
#content { 
 desbordamiento: oculto; 
} 
#content .middle { 
 ancho: 100%; 
 fondo: rosa intenso; 
} 
#content .middle .m_inner { 
 padding: 0 200px; 
} 
#content .left, # content .right { 
 background: pink; 
 ancho: 200 px; 
 alinear texto: centro; 
} 
#content .left { 
 margin-left: -100%; 
} 
#content .right {
 margen izquierdo: -200px; 
}