HTML implementa un diseño de 2 columnas, ancho fijo a la izquierda y adaptable a la derecha
Implementación uno: <style> body, html{padding:0; margin:0;} // Según el posicionamiento CSS, use el posicionamiento flotante o absoluto para separar el elemento del bloque izquierdo del flujo de documentos normal y se puede yuxtaponer con el elemento del bloque derecho div: nth-of -type(1){ float: left; //Usar flotante // posición: absoluta; //Usar posicionamiento absoluto // arriba: 0; // izquierda: 0; rojo; } // [Elemento a nivel de bloque, llena automáticamente el ancho del elemento principal de forma predeterminada, ocupando una línea] // Actualmente: el ancho del elemento de bloque derecho = el ancho del elemento principal div:nth-of-type(2){ // Establece el margen izquierdo al ancho del elemento del bloque izquierdo. margen-izquierda: 300px; // Ahora: el ancho del elemento del bloque derecho = el ancho del elemento principal - altura del margen izquierdo: 220px fondo: azul }</style><html> <div>div1</; div> <div >div2</div></html>1) Antes de configurar el margen izquierdo
2) Después de configurar el margen izquierdo
Implementación dos: <style> body, html{padding:0; margin:0;} // Según el posicionamiento CSS, utilice el posicionamiento flotante o absoluto para separar el elemento de bloque de la izquierda del flujo de documentos normal div:nth-of-type(1 ){ float: izquierda; //Usar flotante // posición: absoluta; //Usar posicionamiento absoluto // arriba: 0; // izquierda: 0; alto: 200px; FC es un flujo de documentos ordinario (normal), un contexto de formato, un área de representación en la página y un conjunto de especificaciones de representación. BFC es un contexto de formato a nivel de bloque. // Utilice el contexto de formato a nivel de bloque BFC para crear un contenedor independiente aislado div:nth-of-type(2){ // Cambie el valor de desbordamiento a no visible, lo que activará el desbordamiento de BFC: oculto altura: 220px; }</estilo><html> <div>div1</div> <div>div2</div></html>Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.