Introducción
El problema resuelto por el diseño del Santo Grial y el diseño del ala de vuelo doble es el mismo que el
ancho superior en ambos lados y el diseño adaptable de tres columnas en el medio. La columna del medio debe renderizarse primero en frente del flujo de documentos.
La solución al problema del diseño del Santo Grial y el diseño del ala doble es la misma en la primera mitad, es decir, las tres columnas flotan, pero las columnas izquierda y derecha más los márgenes negativos se colocan lado a lado con el div de la columna central para formar un diseño de tres columnas.
la diferencia
La diferencia es que la idea de resolver el problema de "el contenido del div de la columna central no está bloqueado" es diferente: el
diseño del Santo Grial , para evitar que se bloquee el contenido del div central, establezca el padding izquierdo y derecho-left y padding-right del div central, y use los divs izquierdo y derecho. Posición de diseño relativa: relativa y coopera con los atributos derecho e izquierdo respectivamente, de modo que los divs izquierdo y derecho no bloqueen el div central después de moverse.
En el diseño de doble ala , para evitar que se bloquee el contenido del div del medio, se crea un subdivisión directamente dentro del div del medio para colocar el contenido, y se utilizan margin-left y margin-right en el subdiv para reservar posiciones para los divs de la columna izquierda y derecha.
1 div más, menos uso de aproximadamente 4 atributos css (divpadding-left y padding-right en el medio del diseño del Santo Grial, más los dos divs izquierdo y derecho usan la posición relativa del diseño: relativo y el correspondiente derecho e izquierdo, un total de 4 Hay 6 atributos en total; mientras que los atributos margin-left y margin-right 2 se utilizan en la subdivisión del diseño de Shuangfeiyi, 6-2 = 4), creo que es más directo y conciso que el diseño del Santo Grial.
En breve
En pocas palabras, es el "diseño del ala voladora del Santo Grial y más que crear un div, pero no la ubicación relativa" en lugar del título que dice "deshacerse del relativo" es el ala voladora ". Cuadro de comparación de
efectos de demostración ado directamente Subir código
Diseño del Santo Grial:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#hd {
height: 50px;
background: #666;
text-align: center;
}
#bd {
/*左右栏通过添加负的margin放到正确的位置了，此段代码是为了摆正中间栏的位置*/
padding: 0 200px 0 180px;
height: 100px;
}
#middle {
float: left;
width: 100%;
/*左栏上去到第一行*/
height: 100px;
background: blue;
}
#left {
float: left;
width: 180px;
height: 100px;
margin-left: -100%;
background: #0c9;
/*中间栏的位置摆正之后，左栏的位置也相应右移，通过相对定位的left恢复到正确位置*/
position: relative;
left: -180px;
}
#right {
float: left;
width: 200px;
height: 100px;
margin-left: -200px;
background: #0c9;
/*中间栏的位置摆正之后，右栏的位置也相应左移，通过相对定位的right恢复到正确位置*/
position: relative;
right: -200px;
}
#footer {
height: 50px;
background: #666;
text-align: center;
}
</style>
</head>
<body>
<div id="hd">header</div>
<div id="bd">
<div id="middle">middle</div>
<div id="left">left</div>
<div id="right">right</div>
</div>
<div id="footer">footer</div>
</body>
</html>
Diseño de alas dobles
Código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#hd{
height:50px;
background: #666;
text-align: center;
}
#middle{
float:left;
width:100%;/*左栏上去到第一行*/
height:100px;
background:blue;
}
#left{
float:left;
width:180px;
height:100px;
margin-left:-100%;
background:#0c9;
}
#right{
float:left;
width:200px;
height:100px;
margin-left:-200px;
background:#0c9;
}
/*给内部div添加margin，把内容放到中间栏，其实整个背景还是100%*/
#inside{
margin:0 200px 0 180px;
height:100px;
}
#footer{
clear:both; /*记得清楚浮动*/
height:50px;
background: #666;
text-align: center;
}
</style>
</head>
<body>
<div id="hd">header</div>
<div id="middle">
<div id="inside">middle</div>
</div>
<div id="left">left</div>
<div id="right">right</div>
<div id="footer">footer</div>
</body>
</html>
Bienvenido a unirse al grupo para discusiones técnicas, número de grupo: 954314851
