web-dev-qa-db-fra.com

Comment obtenir des DIV flottantes dans des DIV à largeur fixe pour continuer horizontalement?

J'ai un conteneur DIV avec une hauteur et une largeur fixes (275x1000px). Dans cette DIV, je souhaite placer plusieurs DIV flottantes, chacune d'une largeur de 300 pixels, et faire apparaître une barre de défilement horizontale (axe des abscisses) permettant à l'utilisateur de faire défiler l'écran à gauche et à droite pour tout voir.

Ceci est 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 flottantes ne continueront pas au-delà de la largeur du conteneur. Après avoir placé trois des DIV flottantes, ils continueront en dessous. Si je change overflow-y en auto, la barre de défilement verticale apparaît et je peux faire défiler vers le bas.

Comment puis-je changer cela pour que les DIV flottantes continuent sans se chevaucher?

csshtmlcss-float
36
Matt McCormick
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 le feront correctement lorsqu'ils sont définis sur inline-block dans Internet Explorer. Les conteneurs internes doivent donc être <span> au lieu de <div>.

40
pd.

Vous avez besoin d’un div supplémentaire avec une grande largeur pour contenir les blocs, puis ils s’étendront plus larges que le conteneur div et ne tomberont 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;
}
8
Matthew James Taylor

#row {
    white-space: nowrap; /* important */
    overflow: auto;
}

.items {
    display: inline-block;
}
<div id="row">
    <div class="items">
        <img src="//placehold.it/200/100" alt="item 1" />
    </div>
    <div class="items">
        <img src="//placehold.it/200/100" alt="item 2" />
    </div>
    <div class="items">
        <img src="//placehold.it/200/100" alt="item 3" />
    </div>
    <div class="items">
        <img src="//placehold.it/200/100" alt="item 4" />
    </div>
    <div class="items">
        <img src="//placehold.it/200/100" alt="item 5" />
    </div>
    <div class="items">
        <img src="//placehold.it/200/100" alt="item 6" />
    </div>
    <div class="items">
        <img src="//placehold.it/200/100" alt="item 7" />
    </div>
    <div class="items">
        <img src="//placehold.it/200/100" alt="item 8" />
    </div>
    <div class="items">
        <img src="//placehold.it/200/100" alt="item 9" />
    </div>
    <div class="items">
        <img src="//placehold.it/200/100" alt="item 10" />
    </div>
</div>

Le truc ici est la propriété "white-space: nowrap" du parent qui indique simplement à tous ses éléments enfants de continuer horizontalement et la propriété "display: inline-block" de ses enfants. Vous n'avez pas besoin d'ajouter une autre propriété pour que cela fonctionne.

JS Fiddle: http://jsfiddle.net/2c4jfetf/

6
praisegeek

Enveloppez vos div flotté dans un autre div avec la plus grande largeur.

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

Utilisation:

    div#container {
        overflow: auto;
    }

Ou ajoutez une division sous les trois divisions avec le style:

    {
        clear: both
    }
0
Rony

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

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

Edit: J'ai essayé 3 des solutions suggérées - elles fonctionnent toutes correctement dans Google Chrome - mais la première (conteneur1) ne fonctionne pas dans IE (voir figure) - la solution SPAN obtient donc 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>

Edit 2:

J'ai parcouru cette page de test sur browsershots.org afin de voir comment différents navigateurs la gèrent .. .. Conclusion: la compatibilité du navigateur est nulle. :-)

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

La solution de table a fonctionné plus souvent, mais l'option span (qui est plus propre) n'a été utilisée que par des navigateurs dont je n'ai jamais entendu parler. :-)

0
Ron Savage

La solution de table devrait très bien fonctionner.

Si vous ne souhaitez pas utiliser de tableaux, vous pouvez également placer tous les div .block dans un autre div à l'intérieur du conteneur # et lui donner une largeur "in-between-div" fixée en utilisant javascript après le chargement de la page.

Bien sûr, si vous connaissez déjà le nombre de blocs que vous avez/si le nombre est fixe, vous pouvez attribuer à "in-between-div" une largeur fixe en utilisant css.

0
jeroen

Mon ex:

largeur du div: 850px gridview templatedcolumn ItemTemplate

<span class="buttonspanlt"></span><asp:Button ID="imgEditSave" runat="server" Text="Edit SubStatus" CssClass="buttoncenter" OnClick="imgEditSave_OnClick"/><span class="buttonspanrt"></span>
<span style="display:none;float:left;clear:left;" id="spangrdCancel" runat="server"><span class="buttonspanlt"></span><asp:Button ID="imgCancel" runat="server" Text="Cancel" class="buttoncenter"/><span class="buttonspanrt"></span></span>

end ItemTemplate end templatedcolumn end gridview end div

le bouton a une étendue droite (bouton réel) droite qui ne flottait pas car il y avait un div externe de largeur fixe.

Je devais utiliser une largeur supplémentaire de 140px à l'extérieur du bouton, à l'intérieur du modèle d'item puis cela fonctionnait.

J'espère que cela t'aides!!!

Merci Harish

0
user2639797

On dirait que vous faites une galerie avec des div?

Pourquoi utilisez-vous les divs exactement? 

Il peut être plus facile d’utiliser un ul/li avec des étendues à l’intérieur du li pour obtenir le même effet sans tous les maux de tête des divs flottants.

0
SkyLar