2009-04-05 7 views
128

Je dois créer un conteneur DIV contenant plusieurs autres DIV. Il est demandé que ces DIV ne s'enroulent pas si la fenêtre du navigateur est redimensionnée pour être étroite.Comment faire un DIV ne pas envelopper?

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 container DIV à 3000px largeur dans RTL d'IE7; et ça devient sale.

Existe-t-il un autre moyen de rendre un conteneur DIV inutilisable?

+0

i ajouté ce tag: ** white-space: nowrap; ** et cette balise: ** text-overflow: ellipsis; ** à mon code –

Répondre

10

overflow: hidden devrait vous donner le bon comportement. Ma conjecture est que RTL est foiré parce que vous avez float: left sur l'encapsulé div s. En plus de ce bug, vous avez le bon comportement.

+1

Je vais vérifier s'il est dû à "float: left" sur les divs encapsulés. Mais, le même code fonctionne bien sur Firefox et Safari, mais pas sur IE. Donc, je doute vraiment que ce soit le cas. –

179

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

3

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

33

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

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

Mais seulement dans Chrome et Safari:/

24

Ce qui suit a fonctionné pour moi sans flotter (j'ai modifié votre exemple un peu pour 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 it's a tricky problem to deal with).

+0

Bonne réponse. J'ai ajouté un exemple similaire ci-dessous mais je l'ai supprimé après avoir vu le vôtre. Si vous n'avez pas à soutenir IE9, vous pouvez également utiliser FlexBox: https://jsfiddle.net/7gsrb38L/1/ – ValentinVoilean

+0

Vous pouvez utiliser les commentaires HTML entre les 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. –

+0

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

' renders as '
'dans le code source. – Fleuv

1

vous pouvez utiliser

display: table; 

pour votre conteneur et therfore éviter le overflow: hidden;. Il devrait faire le travail si vous l'avez utilisé juste pour but d'warpping.

2

Aucune de ces réponses n'a fonctionné pour moi.

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

display:inline-block; 
-1

La balise <span> est utilisé pour les éléments en ligne-groupe dans un document.
(source)

+0

Bien que cela soit vrai, il ne semble pas du tout répondre à la question. – Quentin

+0

Ceci répond parfaitement à la question parce que span et div sont identiques à tout moment sauf que div est enveloppé et span ne l'est pas. Et vous pouvez mettre en œuvre toutes les solutions de contournement que vous souhaitez. –

+2

Est-ce que cela signifie que votre suggestion est "Utiliser des travées au lieu de divs"? Parce que ce n'est pas ce que vous avez dit. – Quentin

18

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/

+0

Ceci avec débordement: caché travaillé un régal pour moi. Merci. – Alfie

12

Le combo dont vous avez besoin est

white-space: nowrap 

sur le parent et

display: inline-block; // or inline 

sur les enfants

Questions connexes