"Si un trabajador quiere hacer bien su trabajo, primero debe afilar sus herramientas." - Confucio, "Las Analectas de Confucio. Lu Linggong"
Página delantera > Programación > ¿Cómo lograr el ancho de fluido e incluso el espacio para cuatro divs en un contenedor?

¿Cómo lograr el ancho de fluido e incluso el espacio para cuatro divs en un contenedor?

Publicado el 2025-02-06
Navegar:121

How to Achieve Fluid Width and Even Spacing for Four DIVs in a Container?

fluido ancho con divs espaciados igualmente

pregunta:

tiene un contenedor de ancho fluido Div con cuatro divs, cada uno con dimensiones fijas. ¿Cómo puede flotar el cuadro 1 a la izquierda, el cuadro 4 a la derecha y las cajas espaciales 2 y 3 de manera uniforme entre ellos, manteniendo el espacio fluido a medida que cambia el tamaño de la ventana del navegador?

** Respuesta:

[ Consulte el Jsfiddle proporcionado para un ejemplo completo: http://jsfiddle.net/thirtydot/edp8r/§e&&&FOED&&&&&&&&EXPLANATION:>&&&font> ahunder .&&font>&&&&&THIS utiliza varias técnicas para lograr el diseño deseado:

text-align: justify;: esto alinea los divs horizontalmente, distribuyendo espacio entre ellos.

. Estiramiento:
    un tramo con ancho establecido en 100%. Se expande para llenar el ancho restante del contenedor.
  • display: inline-block; *Pantalla: en línea; zoom: 1;:
  • garantiza el comportamiento de bloque en línea para IE6/7.
  • Font-Size: 0; línea-height: 0;:
  • previene el espacio vertical causado por bloque en línea en ie6.
  • combinando estas técnicas, los divs se colocan fluidamente, uniformemente espaciados y flotando como se desea, independientemente de el ancho del contenedor.
Último tutorial Más>

Descargo de responsabilidad: Todos los recursos proporcionados provienen en parte de Internet. Si existe alguna infracción de sus derechos de autor u otros derechos e intereses, explique los motivos detallados y proporcione pruebas de los derechos de autor o derechos e intereses y luego envíelos al correo electrónico: [email protected]. Lo manejaremos por usted lo antes posible.

Copyright© 2022 湘ICP备2022001581号-3