Comment faire un DIV emballez pas?

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

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, le rendu est incorrect. J'ai trouvé le conteneur DIV changement de 3000px largeur de RTL de IE7; et il s'avère être salissant.

Est-il un autre moyen de faire un DIV conteneur de ne pas enrouler?

j'ai ajouté cette balise : white-space: nowrap; et cette balise: text-overflow: ellipsis; pour mon code

InformationsquelleAutor Morgan Cheng | 2009-04-05

226

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

InformationsquelleAutor notkwite
45

Si je ne veux pas de définir une largeur minimale car je ne sais pas la quantité d'éléments que la seule chose qui a fonctionné pour moi, c'était:
```
display: inline-block;
white-space: nowrap;
```
Mais seulement dans le Chrome et Safari :/

InformationsquelleAutor fguillen
31

La suite travaillé pour moi sans flottante (j'ai modifié votre exemple un peu pour l'effet visuel):

CSS:
```
.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;
}
```
HTML:
```
<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 voulez pas cela, utilisez margin-right: -4px; au lieu de margin: 5px; pour .slide (c'est moche mais c'est un problème délicat à traiter).
- Grande réponse. J'ai ajouté un exemple similaire ci-dessous, mais je l'ai supprimé après j'ai vu le vôtre. Si vous n'avez pas à appuyer IE9, vous pouvez également utiliser flexbox: jsfiddle.net/7gsrb38L/1
- Vous pouvez utiliser les commentaires en HTML entre les balises div </div><div class="slide"> si vous souhaitez supprimer les espaces entre eux. Le inline-block style provoque l'espace blanc dans votre code soit pris en compte comme l'espace dans le document HTML.
- pour réduire la taille de la page vous pourrait plutôt utiliser quelque chose, ce qui n'est pas rendu par ex. lors de l'utilisation de php: </div><?php ?><div class="slide"> rend </div><div class="slide"> dans le code source.
- Aussi, si vous générez le code HTML avec JavaScript, vous pouvez éviter les espaces. J'utilise DOThtml. Le HTML ci-dessus peut être remplacé par ceci: dot("body").div(dot.iterate(4, function(i){return dot.div("something something something something").class("slide");})).class("container")
InformationsquelleAutor JSideris
28

Le combo que vous avez besoin est
```
white-space: nowrap
```
sur le parent et
```
display: inline-block; //or inline
```
sur les enfants

InformationsquelleAutor Funkodebat

Cela a fonctionné pour moi:

CSS:

.container {
  display: inline-flex;
}

.slide {
  float: left;
}

HTML:

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

Ce avec overflow:hidden travaillé un régal pour moi. Merci.

InformationsquelleAutor Turako

10

overflow: hidden devrait vous donner le bon comportement. Ma conjecture est que RTL est foiré parce que vous avez float: left sur la encapsulé divs.

À côté de ce bug, vous avez le droit de comportement.
- Je vais vérifier si elle est due à "float:left" sur encapsulé divs. Mais, même code fonctionne très bien sur Firefox et Safari, mais pas sur IE. Alors, j'ai vraiment de doute, c'est le cas.
InformationsquelleAutor Yuval Adam
2

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

InformationsquelleAutor Andres GR
2

Aucun des ci-dessus a fonctionné pour moi.

Dans mon cas, j'avais besoin d'ajouter les éléments suivants à l'utilisateur le contrôle que j'avais créé:
```
display:inline-block;
```
InformationsquelleAutor J-DawG
1

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

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

InformationsquelleAutor Aistina
1

vous pouvez utiliser
```
display: table;
```
de votre conteneur et donc d'éviter la overflow: hidden;. Il devrait faire le travail si vous avez utilisé juste pour warpping but.

InformationsquelleAutor Paka

<div style="height:200px;width:200px;border:; white-space: nowrap;overflow-x: scroll;overflow-y: hidden;">
   <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.
   The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.
   The quick brown fox jumps over the lazy dog.
   The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.
   The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.</p>
</div>

InformationsquelleAutor Anil Khatour

-1

La <span> balise est utilisée pour regrouper les éléments dans un document.

(source)
- Si cela est vrai, il ne semble pas répondre à la question à tous.
- Cela répond parfaitement à la question, car span et div sont identiques dans everithing sauf que div est enveloppé et la durée n'est pas. Et vous pouvez mettre en œuvre les solutions de contournement que vous le souhaitez.
- Est-ce à dire que votre suggestion est "Utiliser les travées au lieu de divs"? Parce que ce n'est pas ce que vous avez dit.
InformationsquelleAutor Mykhaylo Adamovych

Vous devez vous connecter pour publier un commentaire.