web-dev-qa-db-fra.com

Comment faire une DIV pas emballer?

J'ai besoin de créer un style de conteneur de conteneur qui contient plusieurs autres DIV. Il est demandé à ces DIV de ne pas boucler si la fenêtre du navigateur est redimensionnée pour être étroite.

J'ai essayé de le faire fonctionner comme ci-dessous.

<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>

Cela fonctionne dans la plupart des cas. Cependant, dans certains cas particuliers, le rendu est incorrect. J'ai trouvé le conteneur DIV changer à la largeur 3000px dans RTL d'IE7; et il s'avère être en désordre.

Existe-t-il un autre moyen de ne pas emballer un conteneur DIV?

htmlcssword-wrapnowrap
158
Morgan Cheng

Essayez d’utiliser white-space: nowrap; dans le style du conteneur (au lieu de overflow: hidden;).

217
notkwite

Si je ne veux pas définir une largeur minimale parce que je ne connais pas la quantité d'éléments, la seule chose qui a fonctionné pour moi a été:

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

Mais uniquement dans Chrome et Safari: /

44
fguillen

Ce qui suit a fonctionné pour moi sans flotter (j'ai légèrement modifié votre exemple pour obtenir un effet visuel):

.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>

Les divs peuvent être séparés par des espaces. Si vous ne le souhaitez pas, utilisez margin-right: -4px; au lieu de margin: 5px; pour .slide (c'est moche mais c'est un problème délicat à traiter ).

28
JSideris

Le combo dont vous avez besoin est

white-space: nowrap

sur le parent et

display: inline-block; // or inline

sur les enfants

26
Funkodebat

Cela a fonctionné pour moi:

.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/

23
Turako

overflow: hidden devrait vous donner le comportement correct. Mon hypothèse est que RTL est gâché parce que vous avez float: left sur le _ encapsulé divs.

A côté de ce bug, vous avez le bon comportement.

10
Yuval Adam

Essayez d'utiliser width: 3000px; pour le cas d'IE.

3
Andres GR

Aucun de ce qui précède n'a fonctionné pour moi.

Dans mon cas, je devais ajouter ce qui suit au contrôle utilisateur que j'avais créé:

display:inline-block;
2
J-DawG

vous pouvez utiliser

display: table;

pour votre conteneur et donc éviter le overflow: hidden;. Cela devrait faire l'affaire si vous ne l'utilisiez que pour des raisons de warpping.

1
Paka

La propriété min-width ne fonctionne pas correctement dans Internet Explorer, ce qui est probablement la cause de vos problèmes.

Lire info et n script brillant qui corrige de nombreux problèmes CSS IE CSS .

1
Aistina