El div central se superpone al div flotante a la izquierda.
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.
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 contenedordiv
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: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.