37 votes

Matt McCormick avatar

Comment faire en sorte que les DIV flottants à l'intérieur d'un DIV à largeur fixe se poursuivent horizontalement ?

Demandé el 18 de Juin, 2009
Quand la question a-t-elle été
53798 affichage
Nombre de visites la question a
5 Réponses
Nombre de réponses aux questions
Résolu
Situation réelle de la question

J'ai un DIV conteneur avec une hauteur et une largeur fixes (275x1000px). Dans ce DIV, je veux placer plusieurs DIV flottants ayant chacun une largeur de 300px, et faire apparaître une barre de défilement horizontale (axe x) pour permettre à l'utilisateur de faire défiler l'écran à gauche et à droite pour tout voir.

Voici mon CSS jusqu'à présent :

div#container {
    height: 275px;
    width: 1000px;
    overflow-x: auto;
    overflow-y: hidden;
    max-height: 275px;
}

div#container div.block {
    float: left;
    margin: 3px 90px 0 3px;
}

Le problème est que les DIV flottants ne dépassent pas la largeur du conteneur. Après avoir placé trois DIV flottants, ils continuent en dessous. Si je remplace overflow-y par auto, la barre de défilement verticale apparaît et je peux faire défiler la page vers le bas.

Comment puis-je modifier cela pour que les DIV flottants continuent sans passer en dessous les uns des autres ?

Demandé el 18 de Juin, 2009 par Matt McCormick

Réponses

Trop de publicités?

41voto

pd. avatar
pd. Points 755 
div#container {
    height: 275px;
    width: 1000px;
    overflow: auto;
    white-space: nowrap;
}

div#container span.block {
    width: 300px;
    display: inline-block;
}

L'astuce ici est que seuls les éléments qui se comportent comme inline par défaut se comporteront correctement lorsqu'ils sont définis comme inline-block dans Internet Explorer, de sorte que les conteneurs internes doivent être <span> au lieu de <div>.

Répondu el 19 de Juin, 2009 par pd. (755 Points )

7voto

Matthew James Taylor avatar
Matthew James Taylor Points 1691

Vous avez besoin d'une div supplémentaire avec une grande largeur pour contenir les blocs, de sorte qu'ils s'étendent plus largement que la div conteneur et ne tombent pas sur une nouvelle ligne.

Le HTML :

<div id="container">
    <div id="width">
        <div class="block">
            <!-- contents of block -->
        </div>
        <div class="block">
            <!-- contents of block -->
        </div>
        <div class="block">
            <!-- contents of block -->
        </div>
        <!-- more blocks here -->
    </div>
</div>

Le CSS :

#container {
    height: 275px;
    width: 1000px;
    overflow-x: auto;
    overflow-y: hidden;
    max-height: 275px;
}
#container #width {
    width:2000px; /* make this the width you need for x number of blocks */
}
#container div.block {
    float: left;
    margin: 3px 90px 0 3px;
}
Répondu el 19 de Juin, 2009 par Matthew James Taylor (1691 Points )

1voto

Emily avatar
Emily Points 6999

Enveloppez vos divs flottantes dans une autre div de largeur supérieure.

<div style="width:230px;overflow-x:auto;background-color:#ccc;">
    <div style="width:400px">
        <div style="height:100px;width:100px;float:left;border:1px solid #000;"></div>
        <div style="height:100px;width:100px;float:left;border:1px solid #000;"></div>
        <div style="height:100px;width:100px;float:left;border:1px solid #000;"></div>
    </div>
</div>
Répondu el 19 de Juin, 2009 par Emily (6999 Points )

0voto

Rony avatar
Rony Points 6340

Utiliser :

    div#container {
        overflow: auto;
    }

Ou ajoutez une div d'effacement sous les trois divs avec le style :

    {
        clear: both
    }
Répondu el 19 de Juin, 2009 par Rony (6340 Points )

0voto

Ron Savage avatar
Ron Savage Points 7612

Placez les divs que vous voulez faire défiler dans un tableau comme suit :

<div style='width:1000;border:2 solid red;overflow-x:auto'>
   <table><tr>
      <td><div style='width:300;height:200;border:1 solid black'>Cell 1&nbsp;</div></td>
      <td><div style='width:300;height:200;border:1 solid black'>Cell 2&nbsp;</div></td>
      <td><div style='width:300;height:200;border:1 solid black'>Cell 3&nbsp;</div></td>
      <td><div style='width:300;height:200;border:1 solid black'>Cell 4&nbsp;</div></td>
      <td><div style='width:300;height:200;border:1 solid black'>Cell 5&nbsp;</div></td>
   </tr></table>
</div>

Editer : J'ai essayé 3 de ces solutions suggérées - elles fonctionnent toutes bien dans Google Chrome - mais la première (container1) ne fonctionne pas dans IE (allez savoir pourquoi) - donc la solution SPAN obtient mon vote :-) :

<html>
<body>
<style>
div#container1 
   {
   height: 275px;
   width: 100%;
   overflow: auto;
   white-space: nowrap;
   border:2 solid red;
   }

div#container1 div.block 
   {
   width: 300px;
   height: 200px;
   display: inline-block;
   border: 1 solid black;
   }

div#container2 
   {
   height: 275px;
   width: 100%;
   overflow: auto;
   white-space: nowrap;
   border:2 solid red;
   }

div#container2 span.block 
   {
   width: 300px;
   height: 200px;
   display: inline-block;
   border: 1 solid black;
   }

div#container3 
   {
   height: 275px;
   width: 100%;
   overflow: auto;
   white-space: nowrap;
   border:2 solid red;
   }

div#container3 div.block 
   {
   width: 300px;
   height: 200px;
   display: inline-block;
   border: 1 solid black;
   }

</style>
<p>
<div id='container1'>
      <div class='block'>Cell 1&nbsp;</div>
      <div class='block'>Cell 2&nbsp;</div>
      <div class='block'>Cell 3&nbsp;</div>
      <div class='block'>Cell 4&nbsp;</div>
      <div class='block'>Cell 5&nbsp;</div>
</div>
<p>
<div id='container2'>
      <span class='block'>Cell 1&nbsp;</span>
      <span class='block'>Cell 2&nbsp;</span>
      <span class='block'>Cell 3&nbsp;</span>
      <span class='block'>Cell 4&nbsp;</span>
      <span class='block'>Cell 5&nbsp;</span>
</div>
<p>
<div id='container3'>
   <table><tr>
      <td><div class='block'>Cell 1&nbsp;</div></td>
      <td><div class='block'>Cell 2&nbsp;</div></td>
      <td><div class='block'>Cell 3&nbsp;</div></td>
      <td><div class='block'>Cell 4&nbsp;</div></td>
      <td><div class='block'>Cell 5&nbsp;</div></td>
   </tr></table>
</div>
</body>
</html>

Editer 2 :

J'ai fait passer cette page de test par browsershots.org, pour voir comment les différents navigateurs la gèrent. Conclusion : La compatibilité des navigateurs est nulle :-)

http://browsershots.org/http://dot-dash-dot.com/files/test_div2.htm

La solution du tableau fonctionnait plus souvent - mais l'option span (qui est plus propre) ne fonctionnait que sur des navigateurs dont je n'ai jamais entendu parler :-)

Répondu el 19 de Juin, 2009 par Ron Savage (7612 Points )

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

Yandex
X