Comment obtenir des DIVs Flottantes à l'intérieur de largeur fixe DIV continuer à l'horizontale?

J'ai un DIV conteneur avec une fixe en hauteur et en largeur (275x1000px). Dans cette DIV, je veux mettre plusieurs DIVs flottantes chacun avec une largeur de 300px, et horizontal (axe des x) barre de défilement apparaît pour permettre à l'utilisateur de faire défiler à gauche et à droite pour afficher tout le contenu.

C'est mon CSS pour l'instant:

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 DIVs flottantes ne va pas continuer au-delà de la largeur du conteneur. Après avoir mis trois de la DIV flottante est qu'ils vont continuer sur la sous. Si je change d'overflow-y pour auto, puis la barre de défilement verticale s'affiche et je peux faire défiler vers le bas.

Comment puis-je changer cela pour faire les DIVs flottantes continuer sans passer les uns en dessous des autres?

InformationsquelleAutor Matt McCormick | 2009-06-18

40
```
div#container {
    height: 275px;
    width: 1000px;
    overflow: auto;
    white-space: nowrap;
}

div#container span.block {
    width: 300px;
    display: inline-block;
}
```
Le truc c'est que seuls les éléments qui se comportent comme inline par défaut va se comporter correctement lorsque la valeur inline-block dans Internet Explorer, de sorte que l'intérieur des conteneurs doivent être <span> au lieu de <div>.
- Inline-block n'est pas supporté par tous les navigateurs, de sorte qu'il ne devrait jamais être utilisé.
- C'est assez bien pris en charge, en fait, aussi longtemps que vous êtes conscient de l'être un problème avec IE 6/7. Il ne fonctionne pas dans IE 5.5 ou FF 2, mais aucun de ceux représenter quoi que ce soit à proximité d'une part importante des utilisateurs de ces jours.
- j'ai eu un problème similaire où je voulais faire un float:left sur les éléments à l'intérieur d'un div. quand je le fais, que la div verticale de l'espace semble se rétrécir. en utilisant simplement "overflow: auto;" sur le div extérieure semble régler mon problème.
- même ici, juste en utilisant "overflow:auto" dans le conteneur de le faire fonctionner...
- J'ai été en évitant inline-block parce que j'ai aussi entendu dire qu'il ne fonctionne pas dans IE7. Bon à savoir il fonctionne avec une plage, c'est assez facile à faire. Jusqu'à présent fonctionnent très bien.
- Ce n'est pas de travail pour moi. Quelqu'un pourrait mettre en place un jsFiddle?
- Fonctionne très bien, merci !
InformationsquelleAutor pd.

CSS:

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

.items {
    display: inline-block;
}

HTML:

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

L'astuce ici est le "white-space: nowrap" la propriété de la société mère qui dit simplement tous les éléments enfants de continuer à l'horizontale et le "display: inline-block" de la propriété de ses enfants. Vous n'avez pas besoin d'ajouter de tout autre bien pour faire ce travail.

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

InformationsquelleAutor praisegeek

7

Vous avez besoin d'un supplément de div avec une grande largeur pour contenir les blocs, puis elles s'étendent plus large que le div conteneur et de ne pas tomber sur une nouvelle ligne.

Le code HTML:
```
<div id="container">
    <div id="width">
        <div class="block">
            
        </div>
        <div class="block">
            
        </div>
        <div class="block">
            
        </div>
        
    </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;
}
```
- Hey c'est Matthew James Taylor! Je trouve votre site une ressource très utile. Et la bonne réponse +1
- Bas voté parce que la DURÉE de la solution fonctionne mieux, et pour un nombre illimité de blocs intérieurs - n'ont pas besoin de connaître une estimation de la largeur.
- vous avez peut-être raison, d'une durée de version pourrait être mieux, sauf qu'il peut ne pas être valide HTML pour le mettre au niveau des blocs d'éléments à l'intérieur des éléments inline. Voir cette question: stackoverflow.com/questions/746531/...
- il est bon de voir un compatriote Australien ici! Merci pour le upvote 😉
- James Taylor personne N'est à recommander une solution qui utilise un élément de bloc à l'intérieur d'un élément inline.
InformationsquelleAutor Matthew James Taylor

Envelopper votre flottait divs 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>

InformationsquelleAutor Emily

0

La table de la solution devrait fonctionner très bien.

Si vous ne voulez pas utiliser des tableaux, vous pouvez aussi mettre tous .bloc divs dans un autre div à l'intérieur de la #container et de donner cet "entre-deux-div" fixe est calculé de la largeur à l'aide de javascript après le chargement de la page.

Bien sûr, si vous savez déjà comment beaucoup d' .les blocs que vous avez /si le nombre est fixe, vous pouvez donner de l'entre-deux-div" une largeur fixe à l'aide de css.
- Bas voté pour suggérer des tables. Ce n'est pas 1995!
- C'est tout simplement stupide, vous ne savez pas si un tableau de la solution qui est ou n'est pas appropriée parce que le contenu de la balise div / cellules ne sont pas connus de nous.
- Matt question d'origine a déclaré qu'il voulait "plusieurs divs flottants' si une table est la solution la plus probablement pas adapté.
- Vrai, c'est pourquoi j'ai proposé une css / javascript solution. Mon commentaire sur les tables simplement référence à Ron de Savage solution qui fonctionnera toujours, mais utilise des tables.
InformationsquelleAutor jeroen
0

On dirait que vous vous faites de la galerie avec des div à l'?

Quels sont exactement vous à l'aide des divs pour?

Il peut être plus facile d'utiliser une ul/li avec s'étend à l'intérieur de la batterie au lithium pour obtenir le même effet sans les maux de tête de divs flottantes.

InformationsquelleAutor SkyLar

Utilisation:

    div#container {
        overflow: auto;
    }

Ou ajouter une compensation div ci-dessous les trois divs avec le style:

    {
        clear: both
    }

InformationsquelleAutor Rony

Mettre les divs 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>

Edit:
J'ai essayé 3 de ces solutions - ils tous fonctionnent très bien dans Google Chrome), mais le premier (container1) ne fonctionne pas sous IE (allez comprendre) - de sorte que la DURÉE de solution 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>

Edit 2:

J'ai couru cette page de test par le biais de browsershots.org pour voir comment les différents navigateurs gérer.
Conclusion: la compatibilité du Navigateur suce. 🙂

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

La table solution travaillé le plus souvent - mais la durée de l'option (qui est plus propre) seulement cassé sur les navigateurs, je n'ai jamais entendu parler. 🙂

James Taylor: C'est tout simplement stupide, vous ne savez pas si un tableau de la solution qui est ou n'est pas appropriée parce que le contenu de la balise div / cellules ne sont pas connus de nous.

InformationsquelleAutor Ron Savage

0

Mon Ex:

div width: 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>
```
fin ItemTemplate
fin templatedcolumn
fin gridview
fin div

le bouton a gauche du milieu(réel) bouton de droite qui s'étend sur lequel ce n'est pas flottante, comme il n'y avait div extérieure avec une largeur fixe.

J'ai dû utiliser un autre div avec une largeur de 140px à l'extérieur du bouton , à l'intérieur de l'itemtemplate puis il a travaillé.

Espérons que cette aide!!!

Merci
Harish

InformationsquelleAutor user2639797

Vous devez vous connecter pour publier un commentaire.