¿Cómo mantengo los flotantes CSS en una línea?

Question

Quiero tener dos elementos en la misma línea usando float: left para el elemento de la izquierda.

No tengo problemas para lograr esto solo. El problema es que quiero que los dos elementos permanezcan en la misma línea incluso cuando cambie el tamaño del navegador muy pequeño . Ya sabes ... como fue con las tablas.

El objetivo es evitar que el elemento de la derecha envuelva sin importar qué .

¿Cómo le digo al navegador que usa CSS que prefiero estirar el contenido div que envolverlo para que el float: right; div esté debajo del float: left; <=>?

lo que quiero:

                                   \
 +---------------+  +------------------------/
 | float: left;  |  | float: right;          \
 |               |  |                        /
 |               |  |content stretching      \   Screen Edge
 |               |  |the div off the screen  /  <---
 +---------------+  +------------------------\
                                             /

Answer 1

Envuelva sus <div> s flotantes en un contenedor !important que use este truco de ancho mínimo de navegador cruzado:

.minwidth { min-width:100px; width: auto !important; width: 100px; }

Usted puede también necesita establecer " overflow " pero probablemente no.

Esto funciona porque:

• La declaración min-width, combinada con width: 100px hace que todo permanezca en la misma línea en IE7 +
• IE6 no implementa <=>, pero tiene un error tal que <=> anula la declaración <=>, causando que el ancho del contenedor sea de 100 px.

Answer 2

Otra opción es, en lugar de flotar, establecer la propiedad de espacio en blanco ahora en un div padre:

.parent {
     white-space: nowrap;
}

y restablezca el espacio en blanco y use una pantalla de bloque en línea para que los divs permanezcan en la misma línea pero aún puede darle un ancho.

.child {
    display:inline-block;
    width:300px;
    white-space: normal;
}

Aquí hay un JSFiddle: https://jsfiddle.net/9g8ud31o/

Answer 3

Envuelva sus flotadores en un div con un ancho mínimo mayor que el ancho combinado + margen de los flotadores.

No se necesitan hacks ni tablas HTML.

Answer 4

Solución 1:

display: table-cell (no es ampliamente compatible)

Solución 2:

tablas

(Odio los hacks)

Answer 5

Otra opción: no flote su columna derecha; solo dale un margen izquierdo para moverlo más allá del flotador. Necesitará un truco o dos para arreglar IE6, pero esa es la idea básica.

Answer 6

¿Está seguro de que los elementos flotantes de nivel de bloque son la mejor solución para este problema?

A menudo, con las dificultades de CSS en mi experiencia, resulta que la razón por la que no puedo ver la forma de hacer lo que quiero es que me he quedado atrapado en una visión de túnel con respecto a mi marcado (pensando " ¿cómo puedo hacer que estos elementos hagan esto ? ") en lugar de volver atrás y ver qué es exactamente lo que necesito lograr y quizás reelaborar mi html ligeramente para facilitar eso.

Answer 7

recomendaría usar tablas para este problema. Tengo un problema similar y siempre que la tabla solo se use para mostrar algunos datos y no para el diseño de la página principal, está bien.

Answer 8

Agregue esta línea a su selector de elemento flotante

.floated {
    float: left;
    ...
    box-sizing: border-box;
}

Evitará que se agreguen relleno y bordes al ancho, por lo que el elemento siempre permanecerá en fila, incluso si tiene, por ejemplo. tres elementos con un ancho de 33.33333%

Answer 9

Cuando el usuario reduce el tamaño de la ventana horizontalmente y esto hace que los flotadores se apilen verticalmente, elimine los flotadores y en el segundo div (que era un flotador) use margin-top: -123px (su valor) y margin-left: 444px (su valor) para colocar los divs tal como aparecieron con flotadores. Cuando se hace de esta manera, cuando la ventana se estrecha, el div del lado derecho permanece en su lugar y desaparece cuando la página es demasiado estrecha para incluirla. ... que (para mí) es mejor que tener el div del lado derecho " jump " debajo del div del lado izquierdo cuando el usuario estrecha la ventana del navegador.

Answer 10

La forma de evitar esto fue usar un poco de jQuery. La razón por la que lo hice de esta manera fue porque A y B eran anchos porcentuales.

HTML:

<div class="floatNoWrap">
    <div id="A" style="float: left;">
        Content A
    </div>
    <div id="B" style="float: left;">
        Content B
    </div>
    <div style="clear: both;"></div>
</div>

CSS:

.floatNoWrap
{
    width: 100%;
    height: 100%;
}

jQuery:

$("[class~='floatNoWrap']").each(function () {
    $(this).css("width", $(this).outerWidth());
});