es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

El div central se superpone al div flotante a la izquierda.

12 Jul, 2023 Programación

Intento alinear tres divs horizontalmente. El div del centro se está superponiendo al div de la izquierda. ¿Qué estoy haciendo mal?

<div>
  <div style="{{width:"100px"," border:"solid="" blue",="" float:"left"}}="">Texto a la izquierda</div>
  <div style="{{width:"100px"," border:"solid="" green",="" float:"right"}}="">Derecha</div>
  <div style="{{border:"solid" red",="" margin:"0="" auto"}}="">Centro</div>
  <div style="{{clear:"both"}}"></div>
</div>

El centro también se superpone al cuadro verde de la derecha, pero los tamaños de los bordes son iguales, por lo que no se puede ver.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El problema con el diseño se debe al uso de la propiedad float en las cajas de la izquierda y la derecha. Cuando las cajas están flotando, se sacan del flujo normal del documento y el contenedor div no reconoce su tamaño. Esto hace que la caja del centro se sobrelape con la caja de la izquierda.

    Para solucionar esto, puedes utilizar la propiedad display: inline-block en las tres cajas y luego ajustar el margen para que se sitúen una al lado de la otra. Aquí está el código actualizado:

    <div>
  <div style="{{width:" "100px",="" border:="" "solid="" blue",="" display:="" "inline-block"}}="">Izquierda</div>
  <div style="{{width:" "100px",="" border:="" "solid="" green",="" display:="" "inline-block"}}="">Derecha</div>
  <div style="{{border:" "solid="" red",="" display:="" "inline-block",="" margin:="" "0="" 50px"}}="">Centro</div>
  <div style="{{clear:" "both"}}=""></div>
</div>

    En este nuevo código, todas las cajas tienen la propiedad display: inline-block, lo cual mantiene su tamaño y posición en el flujo del documento. El margen en la caja del centro se ajusta para crear espacio entre las cajas.

    ¡Espero que esto sea de ayuda! Avísame si tienes alguna otra pregunta.

Comments are closed.