¿Cómo hacer que un DIV no se envuelva?

128

Necesito crear un estilo contenedor DIV que contenga varios otros DIV. Se solicita que estas DIV no se envuelvan si la ventana del navegador cambia de tamaño para que sea estrecha.¿Cómo hacer que un DIV no se envuelva?

Traté de que funcione como a continuación.

<style> 
    .container 
    { 
     min-width: 3000px; 
     overflow: hidden; 
    } 
    .slide 
    { 
     float: left; 
    } 
</style> 
<div class="container"> 
    <div class="slide">something</div> 
    <div class="slide">something</div> 
    <div class="slide">something</div> 
    <div class="slide">something</div> 
</div>

Esto funciona en la mayoría de los casos. Sin embargo, en algunos casos especiales, la representación es incorrecta. Encontré que el contenedor DIV cambia a 3000 píxeles de ancho en RTL de IE7; y resulta ser complicado.

¿Hay alguna otra manera de hacer que un contenedor DIV no se envuelva?

Fuente

2009-04-05 Morgan Cheng

he añadido esta etiqueta: **-espacio en blanco: nowrap; ** y esta etiqueta: ** texto de desbordamiento: puntos suspensivos; ** a mi código –

overflow: hidden debería darle el comportamiento correcto. Supongo que RTL está en mal estado porque tiene float: left en el div s encapsulado.

Además de ese error, tienes el comportamiento correcto.

Fuente

2009-04-05 12:55:11

Comprobaré si se debe a "float: left" en divs encapsulados. Pero el mismo código funciona bien en Firefox y Safari, pero no en IE. Entonces, realmente dudo que este sea el caso. –

La propiedad min-width no funciona correctamente en Internet Explorer, que probablemente sea la causa de sus problemas.

Lea info y a brilliant script that fixes many IE CSS problems.

Fuente

2009-04-05 13:09:39 Aistina

179

Intente utilizar white-space: nowrap; en el estilo de contenedores (en lugar de overflow: hidden;)

Fuente

2011-04-01 16:06:14 notkwite

intenta utilizar width: 3000px; para el caso de IE.

Fuente

2012-02-29 18:30:59

Si no quiero definir una anchura mínima porque no sé la cantidad de elementos que lo único que trabajó para mí era:

display: inline-block; 
white-space: nowrap;

Pero sólo en Chrome y Safari:/

Fuente

2012-09-17 18:01:21 fguillen

a continuación trabajó para mí sin flotar (he modificado un poco su ejemplo para lograr un efecto visual):

.container 
 
{ 
 
    white-space: nowrap; /*Prevents Wrapping*/ 
 
    
 
    width: 300px; 
 
    height: 120px; 
 
    overflow-x: scroll; 
 
    overflow-y: hidden; 
 
} 
 
.slide 
 
{ 
 
    display: inline-block; /*Display inline and maintain block characteristics.*/ 
 
    vertical-align: top; /*Makes sure all the divs are correctly aligned.*/ 
 
    white-space: normal; /*Prevents child elements from inheriting nowrap.*/ 
 
    
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: red; 
 
    margin: 5px; 
 
}

<div class="container"> 
 
    <div class="slide">something something something</div> 
 
    <div class="slide">something something something</div> 
 
    <div class="slide">something something something</div> 
 
    <div class="slide">something something something</div> 
 
</div>

Los divs pueden estar separados por espacios. Si no quiere esto, use margin-right: -4px; en lugar de margin: 5px; para .slide (es feo pero it's a tricky problem to deal with).

Fuente

2013-06-09 00:03:09 JSideris

Gran respuesta. He agregado un ejemplo similar a continuación, pero lo eliminé después de haber visto el suyo. Si usted no tiene que soportar IE9, también se puede utilizar FlexBox: https://jsfiddle.net/7gsrb38L/1/ – ValentinVoilean

Puede utilizar los comentarios HTML entre las 'divs

' if you want to remove the extra spaces between them. The inline-block style causes the white space in your code to be picked up as space in the HTML document. –

@Jo. to reduce the page size you could rather use something what is not rendered e.g. when using php: '

' renders as '

'en el código fuente. – Fleuv

puede utilizar

display: table;

para su envase y therfore evitar la overflow: hidden;. Debería hacer el trabajo si lo usaste solo para fines de distorsión.

Fuente

2013-09-03 21:08:08 Paka

Ninguno de los anteriores funcionó para mí.

En mi caso, tenía que añadir lo siguiente en el control de usuario que había creado:

display:inline-block;

Fuente

2013-10-16 22:07:19

-1

La etiqueta <span> se utiliza para agrupar Inline-elementos en un documento.
(source)

Fuente

2015-04-27 11:55:34

Si bien esto es cierto, no parece abordar la pregunta en absoluto. – Quentin

Esto aborda perfectamente la pregunta porque span y div son idénticos en everithing excepto que div está envuelto y span no. Y puede implementar cualquier solución alternativa que desee. –

¿Eso significa que su sugerencia es "Utilizar tramos en lugar de divisiones"? Porque eso no es lo que dijiste. – Quentin

Esto funcionó para mí:

.container { 
 
    display: inline-flex; 
 
} 
 

 
.slide { 
 
    float: left; 
 
}

<div class="container"> 
 
    <div class="slide">something1</div> 
 
    <div class="slide">something2</div> 
 
    <div class="slide">something3</div> 
 
    <div class="slide">something4</div> 
 
</div>

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Fuente

2015-08-12 14:51:59 Turako

Esto con desbordamiento: oculto funcionó una delicia para mí. Gracias. – Alfie

El combo que necesita es

white-space: nowrap

en la matriz y

display: inline-block; // or inline

en los niños

Fuente

2017-04-19 16:05:20 Funkodebat

¿Cómo hacer que un DIV no se envuelva?

Respuesta

Cuestiones relacionadas