El segundo div flotante en chrome finaliza antes de la primera div

https://stackoverflow.com/questions/1013027

06-07-2019
|

Pregunta

Dos divs están próximos uno al otro, ambos flotante a la izquierda dentro de un contenedor.En IE y firefox aparecen correctamente, pero en Chrome, la 2ª div flotante borra abajo Div A.Cuando me retire "float:left" en el css, se pasa a la posición correcta en Chrome, pero finaliza en IE y firefox (como debe ser).No sé por qué le está apareciendo de esta manera, en Chrome.Alguna idea?

Solución

El HTML y CSS serían útiles para responder esto.
Si tiene solo dos divs y desea que floten uno al lado del otro, establezca un ancho en cada uno de ellos y flote uno hacia la izquierda y el otro hacia la derecha. Recuerde dejar algo de espacio entre los dos.

Otros consejos

en mi caso, uso display:inline-table para el elemento padre de los elementos flotantes ... Incluso si no es una tabla.

Utilicé el <=> para corregir el error que Google Chrome había encontrado ...

Tengo el mismo problema en Chrome y lo resuelvo dando display:inline-table a div padre

La solución es simple: simplemente agregue el div que contiene todos estos divs y un atributo: display: table; - debería resolver el problema.

Tenía múltiples divisores de css flotantes a la izquierda con enlaces de texto en el interior y el contenedor estaba superpuesto a la derecha de cada uno. La solución fue eliminar el espacio en el texto de visualización del enlace. p.ej. ...> TEXT </a> a ...>TEXT</a>

Debes darle a 1 div la altura

Por ejemplo

Div 1

.oneColFixCtrHdr #mainContent {
    background: #FFFFFF;
    width: 375px;
    height: 0px; /* deze hoogte op 0 instellen, die bepaal je met de onderstaande div. */
    position: relative;
    display: block;
    float: left;
    padding-left: 10px;
    margin-bottom: 20px;
    padding-bottom: 0px;
    padding-top: 20px;
}

Div 2

.oneColFixCtrHdr #maincontent2 {
    background: #FFFFFF;
    width: 390px;
    height: auto;
    position: relative;
    display: inline-block;
    float: right;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 5px;
    padding-bottom: 0px;
    padding-top: 20px;
    padding-left: 20px;
    border-left-style: groove;

En Chrome: parece que este problema tiene algo que ver con el atributo display del elemento primario. Tuve el mismo problema e hice mucha búsqueda. Finalmente lo solucioné eliminando el atributo CSS display de la etiqueta TD principal. También observé una cosa wiered. Cuando tenía display: block; para el elemento primario de la tabla TD, en Chrome, colspan no funcionaba (en IE funcionaba bien). Me rasqué muchos pelos para encontrar este problema.

Me enfrenté al mismo problema con Div y su Children Span flotaba correctamente, para resolver, simplemente agregué la pantalla en línea al padre Div y ahora funciona bien en Chrome y Safari.

Yo envuelto todo en <div style="display:inline;"> ... code .. </div> y resuelto el problema.

Sin un ejemplo de código, esto realmente es solo adivinar
No estoy seguro de cómo funciona Chrome, pero sí sé que IE anuncia sus propios estilos. ¿Utilizaste un restablecimiento CSS? La mayoría de los problemas de navegador cruzado se pueden solucionar con esto
Parece que el ancho combinado de los 2 divs flotantes excede el ancho del contenedor. Intente configurar el ancho del contenedor al 100% o sin ancho ... o reduzca el ancho de los dos divs flotantes.
¿tiene alguna pantalla: propiedades de estilo en línea, bloque, etc. establecidas en alguno de esos divs?

¿Qué pasa con la configuración de visualización: bloque en línea y el ancho para ambos divs?

EDITAR: establecer un ancho máximo de% 50 para cada uno funcionaría en todos los navegadores, excepto IE6, suponiendo que no haya un relleno / margen establecido.

Me he enfrentado con el mismo problema. Chrome muestra incorrectamente divs con flotante. El bloque se muestra debajo del primero. No a un lado como esperaba. Solition es simple! Rodea ambos bloques con div que no hay ningún otro bloque hermano dentro .

Tuve un problema donde tenía un contenedor div con un montón de divs internos que tenían el conjunto de propiedades flotante: left. Mi último div interno (el más a la derecha) también terminó. Solucioné mi problema asegurándome de que las divisiones internas combinadas con márgenes no excedan el ancho de la división del contenedor.

La herramienta de desarrollador de Chrome similar a Firebug fue excelente para ayudarme a solucionar el problema. Para mi div de contenedor no establecí explícitamente un ancho, pero la herramienta de desarrollador de Chrome podría mostrarme el ancho heredado. Luego miré todos los anchos de los divisores internos combinados y luego ajusté parte del ancho del div interno.

también un problema similar con los flotantes hijos div. En mi caso ... estaba flotando un div circundante a la derecha, que contenía un elemento h3 (con propiedad de alineación de texto), seguido de 2 elementos de bloque secundarios.

Intención centre el texto h3, en relación con los elementos del bloque secundario debajo de él.

¿Problema? No tenía un ancho establecido para elementos secundarios de bloque. ¿Por qué? Quería que el ancho tuviera un relleno distinto a la izquierda / derecha en relación con la cantidad de texto en ese contenedor. p.ej. relleno: 10px 30px;

Solución Recurrí a establecer un ancho para los divs circundantes y secundarios, también centrar la alineación del texto en divs secundarios para dar resultados similares al primer intento de caso.

Experimenté el mismo problema. Tenía dos divs con flotante: a la izquierda dentro de una tabla td - Tuve que configurar el estilo td de la tabla para incluir style = & Quot; text-align: left; & Quot; para que se alineen correctamente.

No soy un héroe HTML, así que en mi caso el problema fue realmente tonto.

Fue solo un error de sintaxis , así que asegúrese de verificar toda su sintaxis antes de comenzar a arrancarse el pelo como lo hice yo.

Y SAFARI lo estaba ignorando por completo y mostrando los divs correctamente flotando, así que me confundí mucho.

BÁSICAMENTE era una etiqueta div no cerrada que estaba creando el problema:

<div class="seperator" </div>    instead of    <div class="seperator"> </div>

Licenciado bajo: CC-BY-SA con atribución

No afiliado a StackOverflow