prefacio
Cuando navegamos por la página, a menudo tenemos un diseño CSS de tres columnas a la izquierda, al centro y a la derecha. Este es el diseño clásico de CSS del Santo Grial y el diseño de doble ala. Los lados izquierdo y derecho son fijos, y el medio es adaptable. . El efecto es como se muestra a continuación. A continuación, discutiré con ustedes las similitudes y diferencias entre el diseño del Santo Grial y el diseño de doble ala.
Análisis de código de diseño del Santo Grial
Primero, déjame mostrarte la implementación del diseño del Santo Grial.
- El primer paso es establecer la izquierda y la derecha de la envoltura del contenedor más externo
paddingpara200px - En el segundo paso, renderizamos tres contenedores
content,letf, y .rightParacontentagregarwidthL:100%, déjelo llenar el recipiente,background: green;esheight:200px;fácil ver el efecto. También establezcalefttanto elrightancho como la altura en200px. Luego configure las tres casillas para que floten, es decir , configure todas laswrapinferiores . A continuación, echemos un vistazo al efecto:divfloat:left
En este punto, todo lo que tenemos que hacer es mover los dos contenedores inferiores a las dos áreas en blanco superiores para lograr el efecto de renderizado que queremos. Luego tenemos que agregar un atributo de posicionamiento relativo a la izquierda y a la derecha
left, y el rightcontenedor para moverlos hacia arriba.
- Paso 1: Primero movemos el contenedor y agregamos , ,
leftal contenedor . Primero , devuelva el contenedor a la primera fila, luego muévalo 100 % a la izquierda en relación con el contenedor (es decir, su propio ancho) y luego muévase 200 píxeles a la derecha en relación con él mismo.leftposition: relative;left: -200px;margin-left: -100%;leftcontentcontentleft - Paso 2: movemos
rightel contenedor, agregamosright,margin-left: -200px;al contenedor y, de manera similar , agregamos y movemos la posición derecha a la izquierda en 200 px. Después de estos dos pasos, podemos lograr el mismo efecto que los renderizados. Este es el llamado diseño del Santo Grial.position: relative;left: 200px;rihgtposition: relative;left: 200px;
Código HTML
<body>
<div class="wrap">
<div class="content">
content
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
codigo css
*{
margin: 0px;
padding: 0px;
}
.content{
width: 100%;
background: green;
height: 200px;
}
.left, .right{
height: 200px;
width: 200px;
background: pink;
}
.wrap div{
float: left;
}
.wrap{
padding: 0 200px;
height: 2000px;
}
.left{
margin-left: -100%;
position: relative;
left: -200px;
}
.right{
margin-left: -200px;
position: relative;
left: 200px;
}
Análisis de código del diseño de doble ala voladora
A continuación, les mostraré la realización del diseño del ala voladora doble.
-
El primer paso es el mismo que el diseño del Santo Grial, configuramos el
contentcontenedor, elleftcontenedor y elrightcontenedorfloat:leftpara que floten hacia la izquierda, y establecemosleftlarightaltura y el ancho de la suma en200px, establecemoscontentel ancho en100%y establecemos la altura en200px, que es más conveniente ver el efecto. -
El segundo paso se establece de modo
leftquemargin-left:-100%cubracontentel extremo izquierdo . -
El tercer paso se ajusta entonces para
rightquemargin-left：-200pxquede cubierto porcontentel lado derecho; echemos un vistazo al efecto:
Puedo ver que, aunque a la izquierda y a la derecha
left, el rightcontenedor ha llegado a la posición designada, contentel contenido de nuestro contenedor también está cubierto por los contenedores de ambos lados. no lograr el efecto deseado
- Entonces, en el último paso, colocamos
contentotra capa de contenedor eninnerel contenedor, para que seinnercargue el contenido principal, por lo que debemos configurarinnerlamarginizquierda y la derecha200pxpara lograr el mismo efecto que el renderizado, que es el diseño de doble ala voladora. .
Código HTML
<body>
<div class="wrap">
<div class="content">
<div class="ineer">content</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
codigo css
<style>
*{
margin: 0;padding: 0;
}
.left, .right{
width: 200px;
height: 200px;
background: pink;
float: left;
}
.content{
height: 200px;
background: rgb(45, 173, 75);
float: left;
width: 100%;
}
.ineer{
margin: 0 200px;
height: 200px;
}
.left{
margin-left: -100%;
}
.right{
margin-left: -200px;
}
</style>
Similitudes y diferencias
A continuación describimos las similitudes y diferencias entre los dos diseños.
- Lo mismo: ambos diseños configurarán el cuadro para que flote a la derecha, y el orden de carga de los cuadros en HTML es centro-izquierda-derecha, dado el 100% del ancho del contenedor central para que pueda cambiar con el ancho de la página. Luego superponga los contenedores izquierdo y derecho sobre el contenedor del medio con el margen izquierdo.
- Diferente: cuando se colocan tres contenedores en la misma fila, el diseño del santo grial es ajustar la posición de los contenedores izquierdo y derecho, mover los contenedores izquierdo y derecho fuera del contenedor central mediante posicionamiento relativo y, al mismo tiempo, dar la contenedor más externo un margen interno para evitar cubrir el contenedor del medio. El diseño de doble ala voladora consiste en envolver un contenedor interno en el contenedor central y mostrar el contenido en el contenedor interno en lugar del contenedor central. Proporcione un relleno a la capa interna para que el contenido no sea bloqueado por los contenedores izquierdo y derecho.
resumen
El efecto logrado por el diseño del Santo Grial y el diseño de doble ala es el mismo, pero cuando los contenedores izquierdo y derecho están cubiertos en el contenedor del medio, los contenedores manejados son diferentes. Cuando se trata de contenedores izquierdo y derecho, el diseño del Santo Grial debe prestar atención a la dirección opuesta de la traducción izquierda y derecha cuando se utiliza el posicionamiento relativo. Preste atención al acolchado del contenedor interior cuando se trata del contenedor del medio en el diseño de doble ala.