marcus
¿Cómo hace que los DIV que flotan uno al lado del otro no se ajusten cuando se cambia el tamaño del navegador para que la ventana gráfica se vuelva más pequeña?
div {
float: left;
}
Por ejemplo, cuando el navegador está completamente maximizado, el divse alinean así:
|div| |div| |div| |div| |div| |div| |div| |div|
Pero cuando el navegador cambia de tamaño más pequeño sucede esto:
|div| |div| |div| |div| |div|
|div| |div| |div|
¿Cómo puedo hacer el div¿No se ajusta cuando el navegador se redimensiona más pequeño?
aaronsieb
Envuélvalos en otro div, que tenga un ancho (o ancho mínimo) 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 tener overflow: auto especificado en el div contenedor, para permitir que su altura coincida con los flotantes secundarios.
-
@ajkochanowicz ¿Qué no te funciona? Cuando cambio el tamaño de la ventana de “resultados” a menos de 400 px, los flotadores permanecen en su configuración 3,3,2 como se anuncia.
– Aaron Sieb
12/03/2012 a las 17:30
-
Cada div flota a la izquierda. No sé qué es “publicitar” una configuración 3,3,2. Si todos están flotando a la izquierda, ¿por qué no continúan saliendo del div horizontalmente?
– Adán Grant
12 de marzo de 2012 a las 17:33
-
@ajkochanowicz El div envolvente debe ser tan ancho como la suma de todos sus elementos secundarios si desea que estén en una línea. Esta técnica no hace que los flotadores dejen de envolverse en general, simplemente evita que vuelvan a fluir a medida que el navegador se reduce. En su caso, desea que .vertical-scroll tenga un ancho de 816 px (800 px para el ancho de todos los elementos secundarios, más 16 px para tener en cuenta el borde de los elementos secundarios).
– Aaron Sieb
12/03/2012 a las 19:11
-
Gracias, @AaronSieb En aras de una buena documentación, aquí está mi versión del problema con una (especie de) solución stackoverflow.com/questions/9672176/…
– Adán Grant
13 de marzo de 2012 a las 13:38
jacobthedev
Llegué bastante tarde al juego, pero esto es lo que he encontrado que funciona:
Digamos que tienes 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>
Para que muestre los enlaces en línea, sin envolverlos nunca, simplemente puede usar:
nav ul {
white-space: nowrap;
}
nav ul li {
display: table-cell;
}
No se requieren anchos fijos ni nada.
Violín: http://jsfiddle.net/gdf3prb4/
-
Este es el mejor método de la OMI, y el único método que funciona fácilmente (al menos para mí). Los otros métodos para crear un div contenedor con un ancho fijo podrían funcionar bien si sabe exactamente cuántos píxeles desea, pero en el mundo actual, donde los tamaños de pantalla siempre son diferentes, no desea depender de anchos fijos, ya que eso impide de hacer un sitio web dinámico.
– edwardtyl
30 de julio de 2015 a las 15:02
-
Este método fue el más relevante para mi situación (aparte de flexbox, que todavía parece ser un poco complicado en los navegadores que queríamos admitir), sin embargo, en mi caso, descubrí que también necesitaba
display: tableen el envoltorioulpara mantener el 100% de la altura original de las columnas dentro. Con eso, elwhite-space: nowrapen ese padre tampoco parece necesario, los anchos de las columnas terminan distribuyéndose sin exceder el 100% en total de todos modos.– natevw
15/10/2015 a las 22:08
-
@JacobTheDev Definitivamente, se debe aceptar el método más idiomático y flexible. Me alegro de haberte empujado por encima de la marca de 5k con mi voto a favor 🙂
– davnicwil
18 mayo 2017 a las 15:40
Haz el contenedor div alrededor de ellos.
.container {
width: 500px;
white-space: nowrap;
overflow: visible/hidden/scroll - whichever suits you;
}
-
ese no es el caso con
float-leftniños.– Roko C. Bulján
22 de febrero de 2016 a las 20:28
-
Configuré el ancho del contenedor al 100%; funciona en mi caso. Podría ayudarte en el tuyo.
– cero_cool
24/03/2016 a las 22:22
Me doy cuenta de que está de moda odiar en las mesas, pero pueden ser útiles.
http://jsfiddle.net/td6Uw/
En lugar de hacer flotar los div, colóquelos en una tabla y envuelva la tabla con un div de tamaño restringido. El TR evitará que se envuelva.
Además, utilicé DIV dentro de los TD para facilitar el diseño de celdas. Podría diseñar los TD si dedica el tiempo, pero los encuentro difíciles de diseñar y, por lo general, me debilito y solo uso el método DIV-in-TD empleado por mi violín.
En realidad es muy simple. Ejemplo de código:
Element {
white-space: nowrap;
}
-
no puedo entender por qué esta no es la respuesta número uno ahha
– Brady Edgar
30 de diciembre de 2016 a las 21:28
-
Por Dios, esto fue todo. Aquí nada más funcionó. FWIW, puse esto en el elemento similar a “div” principal.
– Qix – MONICA FUE MALTRATADA
13 de abril de 2017 a las 23:58
-
No me funcionó usando un div, a pesar de su nombre, no-wrap. Se envolvió totalmente.
– Dave
5 de marzo de 2019 a las 17:22
-
no puedo entender por qué esta no es la respuesta número uno ahha
– Brady Edgar
30 de diciembre de 2016 a las 21:28
-
Por Dios, esto fue todo. Aquí nada más funcionó. FWIW, puse esto en el elemento similar a “div” principal.
– Qix – MONICA FUE MALTRATADA
13 de abril de 2017 a las 23:58
-
No me funcionó usando un div, a pesar de su nombre, no-wrap. Se envolvió totalmente.
– Dave
5 de marzo de 2019 a las 17:22