¿Cómo puedo evitar que los elementos Div flotantes se envuelvan cuando se vuelve a clasificar según el tamaño del navegador?

Question

¿Cómo se hace que los DIV flotantes que quedan uno junto al otro no se envuelvan cuando el navegador se redimensiona de modo que la ventana gráfica se vuelve más pequeña?

div { 
    float: left; 
} 

Por ejemplo, cuando el navegador está completamente maximiza la div s línea de arriba como esto:

|div| |div| |div| |div| |div| |div| |div| |div| 

Pero cuando la re-tamaño del navegador más pequeño que esto sucede:

|div| |div| |div| |div| |div| 
|div| |div| |div| 

¿Cómo puede ¿No configuro el div s cuando el navegador se vuelve a clasificar según el tamaño más pequeño?

Answer 1

Ajústelos en otro div, que tenga un ancho (o min-ancho) especificado.

<div class="parentContainer"> 
    <div class="floater"></div> 
    <div class="floater"></div> 
    <div class="floater"></div> 
</div> 

.parentContainer { 
    /* The width of the parent needs to be equal to the total width of the children. 
    Be sure to include margins/padding/borders in the total. */ 
    width: 600px; 
    overflow: auto; 
} 

También ayuda a tener overflow: auto especificado en el div que contiene, para permitir su altura para que coincida con el niño flota.

Answer 2

Hacer el div contenedor alrededor de ellos

.container { 
width: 500px; 
white-space: nowrap; 
overflow: visible/hidden/scroll - whichever suits you; 
} 

Answer 3

Soy consciente de que está de moda odio en tablas, pero pueden ser útiles.
http://jsfiddle.net/td6Uw/
En lugar de dejar flotantes los divs, colóquelos en una tabla y envuelva la tabla con un div de tamaño limitado. El TR evitará envolverse.
Además, utilicé los DIV dentro de los TD para facilitar el diseño de las células. Podrías darle estilo a los TD si pasas el tiempo, pero creo que son difíciles de estilizar y, por lo general, no me gustan y solo uso el método DIV-in-TD que usa mi violín.

Answer 4

Estoy bastante tarde para el juego, pero esto es lo que he encontrado que funciona:

Digamos que usted tiene una navegación estructurada como:

<nav> 
    <ul> 
     <li><a href="#">Example Link</a></li> 
     <li><a href="#">Example Link</a></li> 
     <li><a href="#">Example Link</a></li> 
    </ul> 
</nav> 

conseguirlo para mostrar los enlaces en línea, sin envoltura, simplemente puede usar:

nav ul { 
    white-space: nowrap; 
} 

nav ul li { 
    display: table-cell; 
} 

No hay anchos fijos ni nada requerido.

violín: http://jsfiddle.net/gdf3prb4/

Answer 5

En realidad, es muy simple. Ejemplo de código:

Element { 
white-space: nowrap; 
}