0
133
ViewsPregunta flotante de CSS (se encontraron comportamientos extraños)
Queridos,
A continuación se muestra mi programa flotante simple y también adjunto una imagen del resultado. Mi pregunta es: cuando el ancho en la clase "dos" es de 300 px, el div 2 se mueve al lado del div 1 flotante, esta también es mi expectativa. Sin embargo, cuando cambié el ancho en la clase "dos" de 300 px a 200 px, el div 2 se mantiene debajo del div 1 y el div 3 se mueve para superponerse con el div 2 (ver la imagen adjunta) ¿Por qué? 
<html> <head> <style> .one{ background: yellow; width: 200px; height: 50px; text-align: center; box-shadow: inset 0 0 10px #000; Float: left; } .two { background: rgb(55, 0, 255); width: 300px; height: 50px; text-align: center; box-shadow: inset 0 0 10px #000; } .three { background: rgb(255, 0, 76); width: 200px; height: 50px; text-align: center; box-shadow: inset 0 0 10px #000; } </style> </head> <body> <div class = "one">1</div> <div class = "two">2</div> <div class = "three">3</div> </body> </html>2 answers
Answer question0
Está bien, creo que lo descubrí. El problema radica en el hecho de que parece que el segundo div está debajo del primero. En realidad, se superpone correctamente al primer div y simplemente deja atrás el texto. Puede ver esto si agrega opacidad o elimina el background-color del primer div.
Puede agregar display: flow-root a su segundo (y tercer) div para arreglar esto si es necesario o usar 'float: left' en todos ellos como se sugiere.
<html> <head> </head> <body> <div class = "one">1</div> <div class = "two">22222222</div> <div class = "three">3</div> </body> </html> .one{ background: transparent; width: 200px; height: 50px; text-align: center; box-shadow: inset 0 0 10px #000; float: left; } .two { background: rgb(55, 0, 255); width: 200px; height: 50px; text-align: center; box-shadow: inset 0 0 10px #000; } .three { background: rgb(255, 0, 76); width: 200px; height: 50px; text-align: center; box-shadow: inset 0 0 10px #000; }0
Si agrega este estilo a su cuadro azul;
.two { border: 10px solid #0ff; }Puede ver que el cuadro azul ya está debajo del cuadro amarillo. Lo único que es absurdo aquí es; alineación del texto del cuadro azul centrada solo en el área renderizada del cuadro azul.