Sobre el "Santo Grial de disposición"

introducción

"Santo Grial de disposición" - aunque esto es un tema muy antiguo, pero ya hay muchos artículos en línea relacionados, sino como uno de la entrevista esencial el conocimiento y front-end de entrada, algunos todavía se siente la necesidad de revisar el antiguo. Especialmente han leído "yuanzm" el blog "¿Cómo llegué mientras que Ali y Tencent oferta de" Después del artículo, que sentimos por los demás ningún conocimiento de sus propias necesidades para tomar el tiempo para la práctica al menos tratar de entender lo que sus principios son aún la historia, en lugar de seguir ciegamente las referencias y flotando en la superficie. Me gustaría expresar mi agradecimiento a este artículo ~

El origen del Santo Grial

El diseño es el Santo Grial discutir la implementación de "diseño de tres columnas de líquido", que crea por primera vez y que no pueden ser controlados, pero primero realización perfecta de Mateo Levine en "A List Apart", escribió un artículo en 2006, se centra en una página web sobre el mejor método para lograr el Santo Grial.

El llamado diseño líquido sólido se disposición relativa, el diseño se fija a la sólida como en el recipiente a un vaso de agua, con la anchura de cambio del buque que forma adaptativa puede cambiar el valor de anchura de la disposición, líquido.

En este artículo, los autores señalaron en el momento de algunas implementaciones de los problemas, tales como: el mosto (rendimiento de primera escrita en el DOM izquierda, el centro y está, por fin, derecha) de acuerdo con el orden y otras fuentes, podría dar lugar a código no es suficiente flexibles, especialmente de la orden de carga del DOM, el contenido intermedio no se puede cargar primero.

Por lo que da un plan que hará lo siguiente:

1. Con una anchura fija en ambos lados de la intermedia puede fluir (Fluid);

2. Permite que la columna central apareció por primera vez;

3. Permite cualquier columna en la parte superior;

4. Sólo un extra de divetiqueta

5. Sólo un CSS muy sencillo, para llevar un mínimo de revisión de compatibilidad

El artículo también menciona su idea se basa en la inspiración, "único y verdadero diseño" y "adaptación de Eric Meyer," dos artículos traídos.

Aquí se puede ver el "diseño Santo Grial" de los resultados finales: http://alistapart.com/d/holygrail/example_1.html

implementación

A continuación, ponerse a trabajar, según las ideas específicas de aplicación:

En primer lugar tenemos a la disposición del código HTML, el autor aquí para facilitar la expresión, la etiqueta utiliza un no-semántica id, se sugiere hacer uso de la semántica de cualquier otro funcionario en el proyecto id. Por ejemplo, tenemos que aplicar es una anchura de 200 píxeles izquierda, derecha para el ancho por 150 píxeles, diseño de flujo intermedio.

<div id="header">#header</div>

<div id="container">
  <div id="center" class="column">#center</div>
  <div id="left" class="column">#left</div>
  <div id="right" class="column">#right</div>
</div>

<div id="footer">#footer</div>

Como se mencionó anteriormente, sólo tiene que añadir una capa adicional de divsu id es container. Es el contenido CSS muy sencillo, código específico de la siguiente manera:

body {
  min-width: 550px;      /* 2x LC width + RC width */
}
#container {
  padding-left: 200px;   /* LC width */
  padding-right: 150px;  /* RC width */
}
#container .column {
  height: 200px;
  position: relative;
  float: left;
}
#center {
  background-color: #e9e9e9;
  width: 100%;
}
#left {
  background-color: red;
  width: 200px;          /* LC width */
  right: 200px;          /* LC width */
  margin-left: -100%;
}
#right {
  background-color: blue;
  width: 150px;          /* RC width */
  margin-right: -150px;  /* RC width */
}
#footer {
  clear: both;
}
#header, 
#footer {
  background-color: #c9c9c9;
}

/*** IE6 Fix ***/
* html #left {
  left: 150px;           /* RC width */
}

Echemos un vistazo a hacerlo paso a paso la aplicación de la lógica:

Paso 1 para establecer un marco

El primero en escribir encabezado, pie y tres contenedor div

<div id="header">#header</div>

<div id="container"></div>

<div id="footer">#footer</div>

Nos recipiente en los márgenes izquierdo y derecho a su anchura. Se ve así:

Paso 2 añadido tres columnas

En este punto tenemos un marco básico que se puede poner en tres columnas van.

<div id="header">#header</div>

<div id="container">
  <div id="center" class="column">#center</div>
  <div id="left" class="column">#left</div>
  <div id="right" class="column">#right</div>
</div>

<div id="footer">#footer</div>

Entonces nos damos cada columna acompañado por la anchura apropiada, y los puso flotan. Al mismo tiempo que necesitamos para limpiar el pie abajo ambiente, con tres columnas de flotación junto con el anterior.

#container .column {
  float: left;
}
#center {
  width: 100%;
}
#left {
  width: 200px;  /* LC width */
}
#right {
  width: 150px;  /* RC width */
}
#footer {
  clear: both;
}

Tenga en cuenta que el 100% de la anchura de la columna central se basa en el ancho de sus términos contenedor primario, puesto que se proporciona el contenedor relleno, y por lo tanto se ve en la columna central de la mitad de la página, pero desde la izquierda y la derecha dos columnas en la fila de nuevo en la columna central, y desde el espacio suficiente empujado a la columna del medio de los siguientes, como se muestra a continuación:

Paso 3 en la columna izquierda puso

La columna central ya en su lugar, todo lo que queda es poner las dos columnas alrededor, entonces lo primero que puso la columna izquierda.

Para el procedimiento detallado, no se dividirá en dos pasos más pequeños. En primer lugar, en primer lugar de sus márgenes establecidos a -100%, por lo que, debido a la flotación de la relación, la columna de la izquierda se puede ganar, y la superposición con la columna central, y ocupó la izquierda. Desde la columna superior izquierda y la columna de la derecha, el delantero flotar automáticamente a la posición original de la columna de la izquierda.

Luego usamos el posicionamiento relativo de las propiedades (relativas), y está provisto de una columna de la izquierda anchura offset:

#container .columns {
  float: left;
  position: relative;
}
#left {
  width: 200px;        /* LC width */
  margin-left: -100%;  
  right: 200px;        /* LC width */
}

Se puede ver, se establece la rightpropiedad está en relación con la línea de contenedores a la derecha de desplazamiento de 200 píxeles a la izquierda, de esta manera, es perfectamente dentro del contenedor fue a los márgenes de la posición de la izquierda, que es lo que queremos que se quede en su lugar, como se muestra a continuación a continuación:

Paso 4 acondicionar la columna de la derecha

Por último, tenemos que soportar la columna de la derecha, a continuación, sólo tiene que utilizar el principio de arriba para ponerlo en la posición correcta desde el exterior del recipiente, es necesario establecer una vez más un margen de valor negativo, que es igual a la columna de la derecha anchura:

#right {
  width: 150px;          /* RC width */
  margin-right: -150px;  /* RC width */
}

En este punto, todas las columnas están en su lugar ~

Dirección de origen

https://jsfiddle.net/DotHide/pg47fucg/1/

Artículo de referencia

"En busca del Santo Grial" por Matthew Levine

Este artículo se reproduce en: Ape 2048 sobre "diseño Santo Grial"