Explicación detallada de la solución de diseño html adaptativo medio fijo de ancho izquierdo y derecho

Este artículo presenta una explicación detallada de la solución de diseño html">html medio fijo de ancho izquierdo y derecho y la comparte con todos, de la siguiente manera:

La estructura html es la siguiente.

 <div class=box> <div class=left>left</div> <div class=right>right</div> <div class=center>center</div></div> //Ten cuidado aquí primero. Los elementos flotantes izquierdo y derecho se representan antes de que se represente el elemento del medio. Después de que el elemento flote, los elementos restantes a nivel de bloque ocuparán el ancho del elemento principal <style> .box{ height:200px } .left{ float:left } .right{ float:right; ; ancho:300px; } </estilo>

La estructura html es la siguiente.

 <div class=box> <div class=left>left</div> <div class=right>right</div> <div class=center>center</div></div> // Igual que el diseño flotante, Primero renderice los elementos izquierdo y derecho para que estén ubicados en los extremos izquierdo y derecho del elemento principal, y los elementos centrales restantes ocupen el ancho restante del elemento principal. <estilo> .box{ posición: relativa; } .left{ posición: absoluta; ancho: 100px; izquierda: } .right{ ancho: 100px; ; fondo: rojo; }</estilo>

Poner el elemento principal display:table y el elemento secundario display:table-cell lo convertirá en un bloque en línea.

La ventaja de este diseño es la buena compatibilidad.

 <div class=box> <div class=izquierda> izquierda </div> <div class=center> centro </div> <div class=derecha> derecha </div></div><style> .box{ display : tabla; ancho: 100%; } .izquierda { pantalla: tabla-celda } .centro { ancho: 100%; fondo: rojo }</estilo>

Visualización del elemento principal: los elementos secundarios flexibles se organizarán todos en una fila.

El ancho de flex:n en el elemento hijo será el ancho del elemento padre/n

Por ejemplo, flex:1, el ancho es igual a la altura del elemento principal.

La desventaja del diseño elástico es que su compatibilidad no es alta. Actualmente, el navegador IE no puede utilizar el diseño elástico.

 <div class=box> <div class=izquierda> izquierda </div> <div class=center> centro </div> <div class=derecha> derecha </div></div><style> .box{ display : flex; ancho: 100%; } .left{ ancho: 100px; izquierda: } .right{ ancho:100px } .center{ flex:1;

Visualización del elemento principal: cuadrícula;

columnas de plantilla de cuadrícula: 100px auto 100px;

En orden, el ancho del primer elemento secundario es 100 px, el segundo es adaptativo y el tercero es 100 px;

La ventaja del diseño de cuadrícula es que es extremadamente simple y está determinado directamente por el estilo del elemento principal. La desventaja es que su compatibilidad no es alta.

 <div class=box> <div class=izquierda> izquierda </div> <div class=center> centro </div> <div class=derecha> derecha </div></div><style> .box{ display : cuadrícula; columnas de plantilla de cuadrícula: 100px auto 100px ancho: 100%;

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.