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

216

Quiero tener dos elementos en la misma línea usando float: leftpara 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 mesas.

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

¿Cómo le digo al navegador usando CSS que prefiero estirar el contenidodiv que envolverlo para que el float: right;div esté debajo del float: left; div?

lo que quiero:

                                   \
 +---------------+  +------------------------/
 | float: left;  |  | float: right;          \
 |               |  |                        /
 |               |  |content stretching      \   Screen Edge
 |               |  |the div off the screen  /  <---
 +---------------+  +------------------------\
                                             /
Jiaaro
fuente
54
¿Qué tan genial sería si StackOverlow agregara un pequeño widget de dibujo para que pudiéramos hacer estos diagramas con el mouse? Podría ser más apropiado para sitios de SE orientados al diseño ... pero sería increíble, sin embargo.
JoeCool
55
@JoeCool El sitio UX SE en realidad ya tiene una herramienta para crear maquetas. meta.ux.stackexchange.com/questions/1291/…
Frank Hadder

Respuestas:

77

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

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

Es posible que también deba configurar "desbordamiento", pero probablemente no.

Esto funciona porque:

  • La !importantdeclaración, combinada con min-widthhacer que todo permanezca en la misma línea en IE7 +
  • IE6 no se implementa min-width, pero tiene un error que width: 100pxanula la !importantdeclaración y hace que el ancho del contenedor sea de 100 px.
Eric Wendelin
fuente
Esto funciona muy bien para dos carrozas, pero no para tres. ¿Puede funcionar para tres?
tylerthemiler
15
El único problema es que fuerza un ancho mínimo fijo.
Matt Montag
66
Esta no es una solución, es solo un ancho mínimo, cuando su contenido se vuelve realmente pequeño (vea la pregunta), por lo que debajo de los 100 px tiene el mismo problema. Especialmente con las celdas de la tabla, esto sigue siendo un problema.
Sanne
Absolutamente impactante: resolvió mi problema al instante. He estado discutiendo con este problema en un diseño simple de arranque de dos columnas con más trucos de caja de los que puedo nombrar, pero esto funcionó perfectamente. Gracias por la explicación de por qué este trabajo - cosas fascinantes, el dom es.
nocarrier
Esto puede funcionar con divs, pero acabo de probarlo con ul / li y no funciona :(
AsGoodAsItGets
132

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 reinicie 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/

Innovaat
fuente
44
Definitivamente la mejor solución que he visto. Funciona para mi caso de uso, pero me pregunto qué tan bien es compatible. Afortunadamente, usar flotadores para TODO se está convirtiendo lentamente en algo del pasado.
Ryan Ore
1
¿Puedes explicar cómo funciona esto? o cualquier enlace al menos?
Anirudhan J
44
@AnirudhanJ No es demasiado difícil. Inline-block hace que los elementos fluyan normalmente con texto en línea (pero conserva algunas de las capacidades de relleno / margen del bloque), y literalmente solo le dice al CSS que no ajuste el texto con el espacio en blanco: opción nowrap (aplicando "normal" "nuevamente para el niño, para evitar que se propague a todo)
Brian
Sin embargo, ¿cómo se obtiene el div a la derecha para flotar a la derecha de la pantalla? Esto solo pone dos bloques en línea uno al lado del otro que no saltan la línea.
addMitt
También puede usar el espacio entre letras: -3px (o cualquier valor que funcione para usted) para eliminar el espacio entre los elementos de bloque en línea. PD: mejor que la respuesta aceptada ;
Claudiu el
15

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.

Zar
fuente
10

Solución 1:

display: table-cell (no ampliamente compatible)

Solución 2:

mesas

(Odio los hacks)

pkario
fuente
8

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.

Steve Clay
fuente
4

¿Estás seguro de que los elementos flotantes a 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 esto? elementos hacen esto ? ") en lugar de volver atrás y mirar qué es exactamente lo que necesito lograr y tal vez reelaborar mi html ligeramente para facilitar eso.

glenatron
fuente
bueno, funciona para casi todo y el diseño existente se basa en él, solo estoy tratando de solucionar un problema con el diseño que se rompe cuando aumenta demasiado el tamaño del texto O cambia el tamaño de la ventana del navegador con un ancho inferior a 700 px
Jiaaro
2

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

Rob Elliott
fuente
2

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 se mantendrá en fila, incluso si tiene, por ejemplo. tres elementos con ancho de 33.33333%

Nebojsha
fuente
0

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) a Posicione los divs tal como aparecieron con carrozas. Cuando se hace de esta manera, cuando la ventana se estrecha, la división del lado derecho permanece en su lugar y desaparece cuando la página es demasiado estrecha para incluirla. ... que (para mí) es mejor que hacer que el div del lado derecho "salte" debajo del div del lado izquierdo cuando el usuario reduce la ventana del navegador.

Bruce Allen
fuente
-3

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 porcentajes de ancho.

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());
});
ScubaSteve
fuente
1
¿Un marco para CSS? Tengo que -jquery para TODAS las búsquedas de JavaScript y, debido a un total y absoluto desprecio por la calidad, ¿tenemos que comenzar a buscar explícitamente CSS con -jquery también? Hazlo bien o no lo hagas en absoluto.
Juan