Cinco formas de realizar el diseño de tres columnas

Tabla de contenido

5. Disposición de las alas voladoras dobles:

El diseño de tres columnas generalmente se refiere a un diseño en el que hay un total de tres columnas en la página, las columnas izquierda y derecha tienen un ancho fijo y el medio es adaptable.

Aproximadamente cinco formas de lograrlo, las tres primeras no pueden lograr el efecto de visualización prioritaria de contenido importante , mientras que las dos últimas pueden:

El ancho izquierdo de la columna más a la izquierda es 300px y el ancho derecho de la columna más a la derecha es 200px

1. Use flotador

Principio: los elementos flotantes abandonan el flujo de documentos

Estructura HTML

<div class="wrapper">

    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>

</div>

Estilo CSS

.left {
    float: left;
    width: 300px;
    height: 400px;
    background-color: limegreen;

}

.right {
    float: right;
    width: 200px;
    height: 400px;
    background-color: yellowgreen;
}

.center {
    height: 400px;
    margin: 0 200px 0 300px;
    background-color: tomato;
}

2. Utilice el posicionamiento absoluto

La idea es básicamente la misma que float, es decir, los valores establecidos son diferentes: en float se establecen float-left y float-right, y se establecen left y right.

Principio: los elementos absolutamente posicionados están fuera del flujo de documentos

La estructura HTML es la misma que la anterior

Estilo CSS

.wrapper {
    position: relative;
}

.left {
    position: absolute;
    left: 0;
    top: 0;
    width: 300px;
    height: 500px;
    background-color: lightgreen;
}

.right {
    position: absolute;
    right: 0;
    top: 0;
    width: 200px;
    height: 500px;
    background-color: lightskyblue;
}

.center {
    height: 500px;
    margin: 0 200px 0 300px;
    background-color: tomato;
}

3. Utilice un diseño flexible

Principio: Aprovechar las características del atributo de orden del artículo contenedor.

Estructura HTML

<div class="wrapper">

    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>

</div>

Estilo CSS

.wrapper {
    display: flex;
    height: 500px;
}

.center {
    order: 1; /* 默认值为0，order越小位置越靠前，越靠上，此时就不用考虑覆盖的问题了*/
    flex-grow: 1;
    /* flex-grow : 默认值为0，为0时有剩余空间也不放大，子元素该属性均为1时，剩余空间被所有为1的子元素均分，有一个子元素该属性为2时，该元素将分得或者努力分得其他为1的子元素所分得空间2倍大小的空间 */
    /* flex-shrink : 默认值为1，当子元素中存在某个元素该属性为0时，若空间不足，则为1的缩小，为0的不变，因此可以猜测，为2的弱小的应该是更多，应该是缩小了为1缩小的空间的两倍 */

    background-color: tomato;
}

.left {
    width: 300px;
    height: 500px;
    background-color: lightgreen;
}

.right {
    order: 2;
    width: 200px;
    height: 500px;
    background-color: lightskyblue;
}

4. El diseño del Santo Grial:

El diseño del Santo Grial es en realidad un diseño de tres columnas, pero el contenido del medio se muestra primero .

Ideas de realización:

1) En las tres columnas del centro de la envoltura, izquierda y derecha, configure el flotador izquierdo (sí, todos son flotantes a la izquierda, entendamos primero, lo explicaré a continuación) y el posicionamiento relativo

El ancho de la izquierda y la derecha son 300px y 200px respectivamente, y el ancho del centro es 100%

(El ancho total del centro es 100%, que es igual al ancho del contenedor del elemento principal. El ancho del contenedor se establecerá estableciendo el valor de relleno menos 300 px para la izquierda y 200 px para la derecha)

2) Debido a la relación entre el flotador y el ancho: 100%, el centro llenará toda la envoltura, y la izquierda y la derecha se exprimirán debajo de ella.

3) Establecer margen de izquierda a izquierda: -100%, dejar que vuelva al lado izquierdo de la línea anterior

(Cuando se establece un valor negativo para margin-left, se puede entender como el ancho del borde izquierdo del elemento actual desde el lado más a la derecha del contenedor del elemento principal, y el 100% es relativo al contenedor del elemento principal (ancho = contenedor del modelo de caja estándar) Ancho), entonces este efecto de -100% es hacer que el borde izquierdo de la izquierda sea adyacente al lado más a la izquierda del contenedor del elemento principal)

4) En este momento, la parte izquierda del centro estará cubierta, por lo que debe configurar el relleno: 0 200px 0 300px para el contenedor del elemento principal y dejar un espacio para la izquierda.

(El ancho de la izquierda es 300. Naturalmente, debe dar al margen interior izquierdo 300px para encoger el contenedor de la envoltura, a fin de reducir el ancho del centro [100% del ancho del contenedor central significa el mismo ancho que el contenedor del elemento principal. Contiene relleno, por lo que cuando configuramos el relleno, el ancho del contenedor del elemento principal se reducirá y el ancho del centro natural también se reducirá], lo mismo ocurre con el margen interior derecho)

5) En este momento, verá que la izquierda aún no está a la izquierda.

(El margen izquierdo es relativo al contenedor del elemento principal. El elemento principal tiene un margen interior izquierdo. Naturalmente, el lado izquierdo del contenedor tiene un ancho adicional de 300 px. En este momento, la izquierda también sigue al contenedor y tiene un ancho de 300 px desde el borde izquierdo del elemento principal. Dado que la izquierda está a 300 px del borde izquierdo, solo dale -300 px)

En este momento, debe pasar el posicionamiento relativo establecido anteriormente y luego ceder a la izquierda: -300px para volver al extremo izquierdo

6) Por la misma razón, establezca margin-left: -200px para right y tire hacia la derecha hasta la primera línea.

(La razón es la misma. Primero, debe hacer que la distancia más a la izquierda del "contenedor de envoltura más a la derecha" sea el ancho de la derecha para evitar que se apriete a la siguiente línea. Antes de eso, ya hemos considerado que el certificador se quedará ., Cobertura derecha, así que configure el relleno para el envoltorio [por qué ya se ha explicado en detalle], el margen interno derecho es 200px, por lo que después de configurar el margen-izquierdo: -200px, el izquierdo es en realidad el más a la derecha El lado es el más a la derecha del contenedor al lado del envoltorio, y hay un relleno de 200px a la derecha. Necesitamos hacer el lado derecho del lado derecho al lado del extremo derecho del envoltorio, y debemos moverlo 200px al derecho)

7) En este momento, configúrelo a la derecha: -200px;

Estructura HTML

<div class="wrapper">

    <div class="center"></div>
    <div class="left"></div>
    <div class="right"></div>

</div>

Estilo CSS

.wrapper {
    height: 500px;
    padding: 0 200px 0 300px; /* wrapper的container两侧空出来left和right的宽度 */
}

.center, .left, .right {
    position: relative;
    float: left;
}

.center {
    width: 100%; /* 宽度＝wrapper的container的宽度，两侧已空出left和right */
    height: 500px;
    background-color: tomato;
}

.left {
    width: 300px;
    height: 500px;
    margin-left: -100%; /* 左侧紧邻container左侧 */
    left: -300px; /* 移至左侧紧邻wrapper最左侧，右侧紧邻container左侧 */
    background-color: lightgreen;
}

.right {
    width: 200px;
    height: 500px;
    margin-left: -200px; /* 右侧紧邻container右侧 */
    right: -200px; /* 移至右侧紧邻wrapper最右侧 */
    background-color: lightskyblue;
}

5. Disposición de las alas voladoras dobles:

El diseño del ala Shuangfei es en realidad similar al diseño del Santo Grial, ambos deben lograr un diseño de tres columnas, y el contenido del medio se muestra primero.

La diferencia es que el diseño del Santo Grial usa un acolchado de envoltura para retener las posiciones izquierda y derecha , mientras que el diseño de doble ala de vuelo usa el margen para el centro , porque está anidado nuevamente fuera del centro con una capa de div (envoltura central) , siempre que el ancho del margen central sea exactamente igual a la izquierda y la derecha, parece que el centro, la izquierda y la derecha son tres paneles independientes visualmente. En este momento, el lado más a la izquierda de la izquierda todavía está adyacente al lado más a la izquierda del contenedor de envoltura, y el lado más a la derecha de la izquierda es adyacente al lado más a la izquierda del contenedor central; el lado más a la derecha sigue siendo el lado más a la derecha del contenedor de envoltura. . El lado más a la izquierda de la derecha es adyacente al lado más a la derecha del contenedor del certificador, porque no establecimos el relleno o el margen para la envoltura y la envoltura central, sino que configuramos el margen para el centro interior (de hecho, la envoltura central es Básicamente, lo anterior y la superposición de envoltura, básicamente no hicieron ningún procesamiento en el estilo de envoltura central, pero necesitamos la estructura de envoltura central para construir la estructura de centro)

Estructura HTML

<div class="wrapper">
    
    <div class="center-wrapper">
        <div class="center">1111111</div>
    </div>

    <div class="left"></div>
    <div class="right"></div>

</div>

Coloque el flotador izquierdo en las tres columnas de la envoltura, envoltura central, izquierda y derecha

El ancho de izquierda y derecha se establece en 300px y 200px respectivamente, y el ancho del envoltorio central se establece en 100%

Establecer margen de izquierda a izquierda: 100% para que vuelva al lado más a la izquierda de la línea anterior

En este momento, parte del contenido en el centro estará cubierto por él, por lo tanto, establezca el margen: 0 200px 0 300px para que el envoltorio central no lo cubra.

Use margin-left: -200px for right para volver al extremo derecho de la línea anterior, y ya está.

Estilo CSS

.wrapper {
    height: 500px;
}

.center-wrapper,
.left,
.right {
    float: left;
    height: 500px;
}

.center-wrapper {
    width: 100%;
    background-color: tomato;
}

.left {
    width: 300px;
    margin-left: -100%;
    background-color: lightgreen;
}

.right {
    width: 200px;
    margin-left: -200px;
    background-color: lightskyblue;
}

.center {
    margin-left: 300px;
    margin-right: 200px;
    height: 500px;
}