CSS - Aligner les divs horizontalement

Question

J'ai un conteneur div avec une largeur et une hauteur fixes, avec débordement :caché.

Je veux une rangée horizontale de float :divs laissés dans ce conteneur.Les divisions qui flottent à gauche pousseront naturellement sur la « ligne » ci-dessous après avoir lu la limite droite de leur parent.Cela se produira même si la taille du parent ne le permet pas.Voici à quoi cela ressemble :

![Faux][1] - image supprimée image de cabane qui avait été remplacée par une publicité

À quoi j'aimerais que ça ressemble :

![Droite][2] - image supprimée image de cabane qui avait été remplacée par une publicité

Note:l'effet que je souhaite peut être obtenu en utilisant des éléments en ligne et des espaces :no-wrap (c'est comme ça que je l'ai fait dans l'image montrée).Cependant, cela ne me sert à rien (pour des raisons trop longues à expliquer ici), car les div enfants doivent être des éléments flottants au niveau du bloc.

Answer 1

Vous pouvez placer un div interne dans le conteneur suffisamment large pour contenir tous les div flottants.

#container {
  background-color: red;
  overflow: hidden;
  width: 200px;
}

#inner {
  overflow: hidden;
  width: 2000px;
}

.child {
  float: left;
  background-color: blue;
  width: 50px;
  height: 50px;
}

<div id="container">
  <div id="inner">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>

Answer 2

style="overflow:hidden" pour les parents div et style="float: left" pour tout l'enfant divs sont importants pour faire le divs aligner horizontalement pour les anciens navigateurs comme IE7 et versions antérieures.

Pour les navigateurs modernes, vous pouvez utiliser style="display: table-cell" pour tout l'enfant divs et le rendu serait horizontal correctement.

Answer 3

vous pouvez utiliser le clip propriété:

#container {
  position: absolute;
  clip: rect(0px,200px,100px,0px);
  overflow: hidden;
  background: red;
}

noter la position: absolute et overflow: hidden nécessaire pour obtenir clip travailler.

Answer 4

Cela semble proche de ce que vous souhaitez :

#foo {
  background: red;
  max-height: 100px;
  overflow-y: hidden;
}

.bar {
  background: blue;
  width: 100px;
  height: 100px;
  float: left;
  margin: 1em;
}

<div id="foo">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
</div>

Answer 5

Flotter:à gauche, affichage :inline-block ne parviendra pas à aligner les éléments horizontalement s'ils dépassent la largeur du conteneur.

Il est important de noter que le conteneur ne doit pas être renvoyé si les éléments DOIVENT s'afficher horizontalement : white-space: nowrap

Answer 6

Vous pouvez désormais utiliser CSS flexbox pour aligner les divs horizontalement et verticalement si vous en avez besoin.la formule générale ressemble à ceci

parent-div {
   display:flex;
   flex-wrap: wrap;
   justify-content: center ; /* for horizontal aligning of child divs */
   align-items : center ; /* for vertical aligning */
   }
child-div {
  width: /* yoursize for each div */ ; 
 }

Answer 7

Faites-les flotter vers la gauche.Dans Chrome, au moins, vous n'avez pas besoin d'un wrapper, id="container", dans l'exemple de LucaM.