Débordement: auto et DIV Problème

Voici l'affaire. J'ai un conteneur DIV avec une largeur de 100%. Et à l'intérieur de cette DIV j'ai des tonnes de DIV vides qui flottent vers la gauche avec l'affichage: bloquer sur eux. (à des fins de test)Débordement: auto et DIV Problème

J'ai overflow-x: auto sur le conteneur.

Une fois que la dernière div atteint la fin de l'élément conteneur, elle passe à la ligne suivante au lieu de rester alignée avec les autres DIV et d'initier une barre de défilement sur le conteneur.

Comment empêcher les valeurs DIV de passer à la ligne suivante et les forcer à invoquer le comportement de défilement sur le conteneur? Faites-moi savoir merci beaucoup!

Voici une photo pour aider: alt text

Source

2010-12-10 Alex

Vous avez tous les deux raison! Merci beaucoup! – Alex

<html> 
    <head> 
     <style type="text/css"> 
      #container { 
       white-space:nowrap; 
      } 

      .child { 
       background-color:#dddddd; 
       display:inline-block; 
       height:100px; 
       width:100px; 

       /* Trick FF2 into using inline-block */ 
       display:-moz-inline-stack; 

       /* Trick IE6 into using inline-block */ 
       *display: inline; 
       zoom:1; 
      } 
     </style> 
    </head> 
    <body> 

     <div id="container"> 

      <div class="child">.</div> 
      <div class="child">.</div> 
      <div class="child">.</div> 
      <div class="child">.</div> 
      <div class="child">.</div> 
      <div class="child">.</div> 
      <div class="child">.</div> 
      <div class="child">.</div> 
      <div class="child">.</div> 
      <div class="child">.</div> 

     </div> 

    </body> 
</html>

Source

2010-12-10 14:30:38 michael

J'ai remarqué que vous mettez des points dans la DIV. Est-ce que cela signifie que les DIV ont besoin de quelque chose en eux pour que cela fonctionne correctement? – Alex

Non, il n'y a pas besoin d'avoir du contenu dans les DIVs, c'était juste un moyen pour moi de tester le code – michael

Avez-vous essayé white-space:nowrap;?

Vous pouvez également trouver que vous devez passer à l'aide de display:inline-block; plutôt que float:left;.

Source

2010-12-10 14:25:25 Spudley

Répondre

Questions connexes