Prevenir el envolvimiento de contenedores (span o div)

Question

Me gustaría poner un grupo de elementos div de ancho fijo en un contenedor y hacer que aparezca la barra de desplazamiento horizontal. Los elementos div/span deben aparecer en una línea, de izquierda a derecha en el orden en que aparecen en el HTML. (esencialmente desenvuelto)

De esta manera aparecerá la barra de desplazamiento horizontal y se puede usar en lugar de la barra de desplazamiento vertical para leer el contenido (de izquierda a derecha).

He intentado flotarlos en un contenedor y luego poner un estilo de "espacio en blanco: nowrap" en el contenedor, pero, ¡ay !, todavía parece envolver. Ideas?

se veía así:

.slideContainer { 
 
    white-space: nowrap; 
 
} 
 
.slide { 
 
    width: 800px; 
 
    float: left; 
 
    display: inline; 
 
}

<div class="slideContainer"> 
 
    <div class="slide">Some content</div> 
 
    <div class="slide">More content</div> 
 
    <div class="slide">Even More content!</div> 
 
</div>

Actualización: Ver site de ejemplos, pero estaban equivocados por no ser de otra manera - Estoy seguro de que el artículo es viejo.

Answer 1

Prueba esto:

.slideContainer { 
 
    overflow-x: scroll; 
 
    white-space: nowrap; 
 
} 
 
.slide { 
 
    display: inline-block; 
 
    width: 600px; 
 
    white-space: normal; 
 
}

<div class="slideContainer"> 
 
    <span class="slide">Some content</span> 
 
    <span class="slide">More content. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span> 
 
    <span class="slide">Even more content!</span> 
 
</div>

Tenga en cuenta que se puede omitir .slideContainer { overflow-x: scroll; } (que browsers may or may not support cuando lee esto), y obtendrá una barra de desplazamiento en la ventana en vez de en este contenedor .

La clave aquí es display: inline-block. Esto tiene decent cross-browser support hoy en día, pero como de costumbre, vale la pena probar en todos los navegadores de destino para estar seguro.

Answer 2

Parece que los divs no saldrán del ancho de su cuerpo. Incluso dentro de otro div.

Lo tiré para probar (sin un doctype) y no funciona como se pensaba.

.slideContainer { 
 
    overflow-x: scroll; 
 
} 
 
.slide { 
 
    float: left; 
 
}

<div class="slideContainer"> 
 
    <div class="slide" style="background: #f00">Some content Some content Some content Some content Some content Some content</div> 
 
    <div class="slide" style="background: #ff0">More content More content More content More content More content More content</div> 
 
    <div class="slide" style="background: #f0f">Even More content! Even More content! Even More content!</div> 
 
</div>

lo que pienso es que los interiores de div se podrían cargar a través de un marco flotante, ya que esa es otra página y su contenido puede ser muy amplia.

Answer 3

Como se ha mencionado que puede utilizar:

overflow: scroll; 

Si sólo desea que aparezca la barra de desplazamiento cuando sea necesario, puede utilizar la opción "auto":

overflow: auto; 

no creo deberías estar usando la propiedad "flotar" con "desbordamiento", pero primero tendría que probar tu ejemplo.

Answer 4

Funciona con sólo esto:

.slideContainer { 
    white-space: nowrap; 
} 
.slide { 
    display: inline-block; 
    width: 600px; 
    white-space: normal; 
} 

Yo tenía originalmente float : left; y que impide que funcione correctamente.

Gracias por publicar esta solución.

Answer 5

Particularmente cuando se usa algo como Twitter Bootstrap, white-space: nowrap; no siempre funciona en CSS cuando se aplica relleno o margen a un niño div. En cambio, sin embargo, agregar un estilo equivalente de border: 20px solid transparent; en lugar de relleno/margen funciona de manera más consistente.