css - posicionamiento - ¿Cómo hacer que un DIV no se envuelva?
posicionar div css (11)
El combo que necesitas es
white-space: nowrap
en el padre y
display: inline-block; // or inline
en los niños
Necesito crear un estilo contenedor DIV que contenga muchos otros DIV. Se solicita que estas DIV no se envuelvan si la ventana del navegador cambia de tamaño para que sea estrecha.
Traté de hacer 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 forma de hacer que un contenedor DIV no se envuelva?
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>
Intenta usar white-space: nowrap; en el estilo contenedor (en lugar de overflow: hidden; )
Intenta usar width: 3000px; para el caso de IE.
La etiqueta <span> se usa para agrupar elementos en línea en un documento.
(source)
La propiedad min-width no funciona correctamente en Internet Explorer, que probablemente sea la causa de sus problemas.
Lea info y un guión brillante que corrige muchos problemas de IE CSS .
Lo siguiente funcionó para mí sin flotar (modifiqué un poco tu ejemplo para obtener 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 es un problema difícil de manejar ).
Ninguno de los anteriores funcionó para mí.
En mi caso, necesitaba agregar lo siguiente al control de usuario que había creado:
display:inline-block;
Si no quiero definir un ancho mínimo porque no sé la cantidad de elementos, lo único que funcionó para mí fue:
display: inline-block;
white-space: nowrap;
Pero solo en Chrome y Safari: /
puedes usar
display: table;
para su contenedor y, por lo tanto, evitar el overflow: hidden; . Debería hacer el trabajo si lo usaste solo para fines de distorsión.
overflow: hidden debería darle el comportamiento correcto. Supongo que RTL está en mal estado porque tienes float: left en los div encapsulados.
Además de ese error, obtuviste el comportamiento correcto.