Evite que los divs flotantes se envuelvan

84

Quiero tener una fila de divs (celdas) que no se ajusten si el navegador es demasiado estrecho para adaptarse a ellos.

Busqué en Stack y no pude encontrar una respuesta funcional a lo que creo que debería ser una simple pregunta CSS.

Las celdas tienen un ancho especificado. Sin embargo, no quiero especificar el ancho de la fila, el ancho debería ser automáticamente el ancho de sus celdas secundarias.

Si la ventana gráfica es demasiado estrecha para acomodar las filas, entonces el div debería desbordarse con barras de desplazamiento.

Proporcione su respuesta como un fragmento de código de trabajo, ya que probé muchas de las soluciones que he visto en otros lugares (como especificar ancho: 100% y no parecen funcionar).

Estoy buscando una solución solo HTML / CSS, sin JavaScript.

.row {
  float: left;
  border: 1px solid yellow;
  width: 100%;
  overflow: auto;
}
.cell {
  float: left;
  border: 1px solid red;
  width: 200px;
  height: 100px;
}
<div class="row">
  <div class="cell">a</div>
  <div class="cell">b</div>
  <div class="cell">c</div>
</div>
Expandir fragmento

Por el momento, estoy codificando el ancho de la fila en un número realmente grande.

html  css-float  word-wrap 
— Nicolás
fuente
1
¿Te funcionó alguna de las siguientes respuestas? No estoy teniendo éxito con ninguno de ellos.
— John Fitzpatrick
Intenté todas las respuestas y ninguna funcionó para mí. El problema era que necesitaba centrar dos divs izquierdos flotantes y evitar que el de la derecha se empujara hacia abajo hacia la izquierda después de cambiar el tamaño de la ventana.
— Bashevis
@Nicholas Creo que mi ejemplo es exactamente lo que estás buscando, me encontré con el mismo problema hoy. Los menús desplegables se desbordan pero el primer nivel no se ajusta.
— John

Respuestas:

107

La propiedad CSS display: inline-blockse diseñó para abordar esta necesidad. Puede leer un poco sobre esto aquí: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

A continuación se muestra un ejemplo de su uso. Los elementos clave son que el rowelemento tiene white-space: nowrapy los cellelementos tienen display: inline-block. Este ejemplo debería funcionar en la mayoría de los navegadores principales; una tabla de compatibilidad está disponible aquí: http://caniuse.com/#feat=inline-block

<html>
<body>
<style>

.row {
    float:left;
    border: 1px solid yellow;
    width: 100%;
    overflow: auto;
    white-space: nowrap;
}

.cell {
    display: inline-block;
    border: 1px solid red;
    width: 200px;
    height: 100px;
}
</style>

<div class="row">
    <div class="cell">a</div>
    <div class="cell">b</div>
    <div class="cell">c</div>
</div>


</body>
</html>
— Calvin
fuente
1
Agregue <!DOCTYPE html>o <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">al principio del HTML para que IE no esté predeterminado en el modo peculiar.
— Cees Timmerman
4
Nota: Tenía mis divs de tipo celda configurados con float: left, y esto forzó que el estilo calculado fuera bloque, en lugar de bloque en línea. Me tomó un tiempo averiguarlo, así que pensé que era mejor compartirlo.
— Steve Hibbert
Esto no funciona con la última celda float: right, ¿verdad?
— Andy
3
Este no es realmente un ejemplo de cómo evitar que los divs flotantes se envuelvan, simplemente eliminó las celdas. Tengo un diseño con algunos flotadores izquierdo y derecho, por lo que no puedo eliminar los flotadores para resolver el problema de la envoltura.
— Andy
Jaja, bastante justo. Es una distinción pedante, pero tienes razón. No resolví "evitar que los divs flotantes se envuelvan", resolví la pregunta real del autor de la pregunta "cómo hago que funcione mi diseño". Para responder al primero: estoy razonablemente seguro de que no hay forma de evitar que los divs flotantes se envuelvan. Al igual que el autor de la pregunta, deberá encontrar una forma diferente de codificar el diseño que está describiendo.
— Calvin
32

Desea definir una min-widthfila para que cuando se cambie el tamaño del navegador no vaya por debajo de eso y se ajuste.

— farooq
fuente
1
Esto funcionaría incluso con flotadores. Creo que esa es la verdadera respuesta.
— Danon
2
De acuerdo con @Danon: esto funciona mientras que el bloque en línea introdujo problemas de alineación vertical.
— dlchambers
1
Depende de tus necesidades. Esto evita que los divs flotantes se envuelvan cuando se cambia el tamaño de la página, pero el autor de la pregunta dijo "No quiero especificar el ancho de la fila, el ancho debería ser automáticamente el ancho de sus celdas secundarias". La especificación de ancho manual requiere algo de trabajo duplicado, ya que necesita calcular el ancho total de la fila. Peor aún, si sus celdas son de ancho variable (digamos, porque tienen el tamaño de una línea de texto dentro de ellas), calcular el total puede ser impráctico o imposible.
— Calvin
-1; Esto va en contra de lo que el OP declaró específicamente en su pregunta, es decir, NO tener que especificar el ancho. +1 al comentario de Calvin arriba.
— Teodor Sandu
4

Después de leer la respuesta de John, descubrí que lo siguiente parecía funcionar para nosotros (no requería especificar el ancho):

<style>
.row {
    float:left;
    border: 1px solid yellow;
    overflow: visible;
    white-space: nowrap;
}

.cell {
    display: inline-block;
    border: 1px solid red;
    height: 100px;
}
</style>

<div class="row">
    <div class="cell">hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello </div>
    <div class="cell">hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello </div>
    <div class="cell">hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello </div>
</div>
— Kevin LeBlanc
fuente
Esto solucionó un problema que tenía con los divs que se pueden arrastrar en el iphone. Cuando los divs tenían más de una palabra en ellos y se arrastraban al borde de la pantalla, el div se ajustaba para que hubiera una palabra en cada línea. De todos modos overflow: visible; white-space: nowrap;hizo el truco para mí. ¡Gracias!
— TryHarder
4
Funcionó porque eliminó las celdas. No es realmente una solución para evitar que los divs flotantes se envuelvan
— Andy
1

La única forma en que me las he arreglado para hacer esto es usando overflow: visible;y width: 20000px;en el elemento padre. No hay forma de hacer esto con el nivel 1 de CSS que yo sepa y me negué a pensar que tendría que ir todo entusiasmado con el nivel 3 de CSS. El siguiente ejemplo tiene 18 menús que se extienden más allá de mi pantalla LCD de resolución de 1920x1200 , si su pantalla es más grande, simplemente duplique los elementos del menú de primer nivel o simplemente cambie el tamaño del navegador. Alternativamente, y con niveles ligeramente más bajos de compatibilidad del navegador, puede utilizar consultas de medios CSS3.

Aquí hay una demostración de ejemplo de copiar / pegar completa ...

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>XHTML5 Menu Demonstration</title>
<style type="text/css">
* {border: 0; box-sizing: content-box; color: #f0f; font-size: 10px; margin: 0; padding: 0; transition-property: background-color, background-image, border, box-shadow, color, float, opacity, text-align, text-shadow; transition-duration: 0.5s; white-space: nowrap;}
a:link {color: #79b; text-decoration: none;}
a:visited {color: #579;}
a:focus, a:hover {color: #fff; text-decoration: underline;}
body {background-color: #444; overflow-x: hidden;}
body > header {background-color: #000; height: 64px; left: 0; position: absolute; right: 0; z-index: 2;}
body > header > nav {height: 32px; margin-left: 16px;}
body > header > nav a {font-size: 24px;}
main {border-color: transparent; border-style: solid; border-width: 64px 0 0; bottom: 0px; left: 0; overflow-x: hidden !important; overflow-y: auto; position: absolute; right: 0; top: 0; z-index: 1;}
main > * > * {background-color: #000;}
main > section {float: left; margin-top: 16px; width: 100%;}
nav[id='menu'] {overflow: visible; width: 20000px;}
nav[id='menu'] > ul {height: 32px;}
nav[id='menu'] > ul > li {float: left; width: 140px;}
nav[id='menu'] > ul > li > ul {background-color: rgba(0, 0, 0, 0.8); display: none; margin-left: -50px; width: 240px;}
nav[id='menu'] a {display: block; height: 32px; line-height: 32px; text-align: center; white-space: nowrap;}
nav[id='menu'] > ul {float: left; list-style:none;}
nav[id='menu'] ul li:hover ul {display: block;}
p, p *, span, span * {color: #fff;}
p {font-size: 20px; margin: 0 14px 0 14px; padding-bottom: 14px; text-indent: 1.5em;}
.hidden {display: none;}
.width_100 {width: 100%;}
</style>
</head>

<body>

<main>
<section style="height: 2000px;"><p>Hover the first menu at the top-left.</p></section>
</main>

<header>
<nav id="location"><a href="">Example</a><span> - </span><a href="">Blog</a><span> - </span><a href="">Browser Market Share</a></nav>
<nav id="menu">
<ul>
<li><a href="" tabindex="2">Menu 1 - Hover</a>
<ul>
<li><a href="" tabindex="2">Menu 1 B</a></li>
<li><a href="" tabindex="2">Menu 1 B</a></li>
<li><a href="" tabindex="2">Menu 1 B</a></li>
<li><a href="" tabindex="2">Menu 1 B</a></li>
<li><a href="" tabindex="2">Menu 1 B</a></li>
<li><a href="" tabindex="2">Menu 1 B</a></li>
<li><a href="" tabindex="2">Menu 1 B</a></li>
<li><a href="" tabindex="2">Menu 1 B</a></li>
</ul>
</li>
<li><a href="" tabindex="2">Menu 2</a></li>
<li><a href="" tabindex="2">Menu 3</a></li>
<li><a href="" tabindex="2">Menu 4</a></li>
<li><a href="" tabindex="2">Menu 5</a></li>
<li><a href="" tabindex="2">Menu 6</a></li>
<li><a href="" tabindex="2">Menu 7</a></li>
<li><a href="" tabindex="2">Menu 8</a></li>
<li><a href="" tabindex="2">Menu 9</a></li>
<li><a href="" tabindex="2">Menu 10</a></li>
<li><a href="" tabindex="2">Menu 11</a></li>
<li><a href="" tabindex="2">Menu 12</a></li>
<li><a href="" tabindex="2">Menu 13</a></li>
<li><a href="" tabindex="2">Menu 14</a></li>
<li><a href="" tabindex="2">Menu 15</a></li>
<li><a href="" tabindex="2">Menu 16</a></li>
<li><a href="" tabindex="2">Menu 17</a></li>
<li><a href="" tabindex="2">Menu 18</a></li>
</ul>
</nav>
</header>

</body>
</html>
— Juan
fuente
Cuando uso la respuesta votada a favor y la reemplazo width:100%por width:1000pxella, funciona para mí
— Nick.McDermaid
@ Nick.McDermaid Usé 20K píxeles por una razón, con las pantallas de 4K saliendo, sabes que eventualmente habrá 8K y así sucesivamente, así que es mejor trabajar con un número increíblemente alto para mantenerlo funcionando durante esos años adicionales hasta que las pantallas sean más altas. -resolución que la vida misma. ;-)
— Juan
Entendido ... Estoy feliz de haberlo dejado de envolver. CSS: me vuelve loco incluso con las herramientas F12. No sé cómo alguien pudo hacer algo sin ellos.
— Nick.McDermaid
1
Para referencia futura: usar un ancho / alto enorme es muy ineficiente porque el navegador aún almacena una caja grande innecesaria en la memoria. Coloque el recipiente en white-space: nowrap;y los niños display: inline-block;como ya se dijo en otras respuestas (o vuelva a display: table;y display: table-cell;).
— gyo
main > * > * {background-color: #000;}O_o
— theflowersoftime
0

Para mí (usando bootstrap), lo único que funcionó fue la configuración display:absolute;z-index:1en la última celda.

— Spikolynn
fuente
1
display:absoluteno es CSS válido
— caiosm1005
-1

Tuve un problema algo similar en el que un área delimitada consistía en una imagen en un flotador: bloque izquierdo y un bloque de texto no flotante. El área tiene un ancho fluido. El texto, por diseño, se envolvería en el lado derecho de la imagen. El problema era que el texto comenzaba con una etiqueta <h2>, cuya primera palabra es la palabra diminuta "De". Cuando cambié el tamaño de la ventana a un ancho menor, el texto no flotante dejaría, para un cierto rango de anchos, solo la palabra "De" en la parte superior del área de ajuste, el resto del texto se comprimió debajo del flotante. bloquear. Mi solución fue agrandar la primera palabra de la etiqueta, reemplazando el espacio que le seguía con este código, <span style = "opacity: 0;"> x </span>. El efecto fue hacer la primera palabra, en lugar de "From", "FromxNextWord", donde la "x", al ser invisible, parecía un espacio. Ahora mi primera palabra fue lo suficientemente grande como para no ser abandonada por el resto del bloque de texto.

— Jim
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.