¿Cuántas formas hay de implementar el diseño clásico de dos columnas izquierda y derecha?

¡Acostúmbrate a escribir juntos! Este es el tercer día de mi participación en el "Nuggets Daily New Plan · April Update Challenge", haz clic para ver los detalles del evento

El llamado diseño de dos columnas izquierda y derecha, es decir 左侧宽度固定，右侧宽度自适应, déjame contarte sobre la implementación del diseño clásico de dos columnas izquierda y derecha, existen los siguientes siete métodos.

La estructura DOM en la página es la siguiente:

<div class="container">
  <div class="left">我是侧边栏</div>
  <div class="right">我是内容区域</div>
</div>
复制代码

Método 1: Usar diseño flexible (el más común)

Idea de implementación: establezca un ancho fijo en el elemento de la izquierda y establezca las propiedades CSS en el elemento de la derecha flex: 1.

.container {
  display: flex;
  width: 100%;
  height: 500px;
}
.left {
  width: 240px;
  height: 100%;
  background-color: lightskyblue;
}
.right {
  flex: 1;
  height: 100%;
  background-color: red;
}
复制代码

Método 2: Usar flotador

Idea de implementación: establezca un ancho fijo en el elemento izquierdo y establezca la propiedad CSS, y establezca la propiedad CSS float: leften el elemento derecho margin-left, cuyo valor es igual al ancho del elemento izquierdo.

.container {
  width: 100%;
  height: 500px;
}
.left {
  float: left;
  width: 240px;
  height: 100%;
  background-color: lightskyblue;
}
.right {
  margin-left: 240px;
  height: 100%;
  background-color: red;
}
复制代码

Método 3: También usa float

Idea de implementación: establezca un ancho fijo en el elemento izquierdo y establezca las propiedades CSS, y establezca las propiedades CSS float: leften el elemento derecho overflow: auto. En este momento, se activará el lado derecho BFCy BFC el área no se superpondrá con el elemento flotante, por lo que los dos los lados no se superpondrán.

.container {
  width: 100%;
  height: 100vh;
}
.left {
  float: left;
  width: 240px;
  height: 100%;
  background-color: lightskyblue;
}
.right {
  height: 100%;
  overflow: auto;
  background-color: red;
}
复制代码

Método 4: Usar posicionamiento relativo/absoluto

Idea de implementación: configure el elemento principal position: relative, configure el ancho fijo del elemento izquierdo y configure la propiedad CSS position: absolute, y configure la propiedad CSS del elemento derecho margin-left, y su valor es igual al ancho del elemento izquierdo.

.container {
  height: 500px;
  position: relative;
}
.left {
  width: 240px;
  height: 100%;
  position: absolute;
  background-color: lightskyblue;
}
.right {
  height: 100%;
  margin-left: 240px;
  background-color: red;
}
复制代码

Darse cuenta:

• Absolute hará que el elemento salga del flujo del documento, y right empujará directamente el contenido en la parte superior, por lo que debemos establecer margin-left igual al ancho del elemento izquierdo.
• El ancho del div es 100 % de forma predeterminada, pero cuando se establece absoluto, el ancho ya no es 100 %, sino que está determinado por el ancho del contenido.

Solución:

• Puede establecer directamente el ancho: 100%.
• También puede configurar izquierda: 0; derecha: 0.

Método 5: Utilice también el posicionamiento relativo/absoluto

Idea de implementación: establezca las propiedades CSS en el elemento principal position: relative, establezca un ancho fijo en el elemento izquierdo, establezca las propiedades CSS en el elemento derecho position: absolutey establezca el valor del left、right、top、bottomatributo , donde leftel valor es igual al ancho del elemento izquierdo.

.container {
  height: 500px;
  position: relative;
}
.left {
  width: 240px;
  height: 100%;
  background-color: lightskyblue;
}
.right {
  height: 100%;
  position: absolute;
  left: 240px;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: red;
}
复制代码

Método 6: use la tabla de disposición de la tabla

Ideas de implementación: configure las propiedades de CSS en el elemento principal display: tabley configure el ancho al 100 %; configure las propiedades de CSS en el elemento de la izquierda display: table-celly configure un ancho fijo; configure las table-cellpropiedades .

.container {
  display: table;
  width: 100%;
  height: 500px;
}
.left {
  display: table-cell;
  width: 240px;
  height: 100%;
  background-color: lightskyblue;
}
.right {
  display: table-cell;
  height: 100%;
  background-color: red;
}
复制代码

Método 7: use la función calc

Idea de implementación: establezca las propiedades de CSS en el elemento de la izquierda float: lefty establezca un ancho fijo; establezca las propiedades de CSS en el elemento de la derecha float: lefty establezca el ancho width, y su valor es igual a calc(100% - 左侧元素的宽度).

.container {
  width: 100%;
  height: 500px;
}
.left {
  float: left;
  width: 240px;
  height: 100%;
  background-color: lightskyblue;
}
.right {
  float: left;
  width: calc(100% - 240px);
  height: 100%;
  background-color: red;
}
复制代码

Las representaciones de estos siete métodos se muestran a continuación.

Después de aprender el diseño de dos columnas y luego escribir CSS para el diseño de tres columnas, ¡no hay mayor problema!