CSS - Rendre les divs alignés horizontalement

Question

J'ai un conteneur div avec une largeur et une hauteur fixes, avec trop-plein: caché.

Je veux une ligne horizontale de float: div à gauche dans ce conteneur. Les divisions qui sont flottantes à gauche vont naturellement pousser sur la 'ligne' ci-dessous après avoir lu la bonne limite de leur parent. Cela arrivera même si la hauteur du parent ne le permet pas. Voici comment cela ressemble:

[Mauvais] [1] - enlevé image image cabane qui avait été remplacée par une annonce

Comment je voudrais qu'il regarde:!

[Droit ] [2] - l'image cabane d'image enlevée qui avait été remplacée par une annonce

note: l'effet que je veux peut être réalisé en utilisant des éléments en ligne & white-space: no-wrap (qui est comme je l'ai fait dans l'image montrée). Ceci, cependant, n'est pas bon pour moi (pour des raisons trop longues à expliquer ici), car les divs d'enfant doivent être des éléments de niveau de bloc flottants.

Answer 1

Vous pouvez placer un div interne dans le conteneur suffisamment large pour contenir toutes les divs flottantes.

#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

Cela semble proche de ce que vous voulez:

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

vous pouvez utiliser la propriété clip:

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

note la position: absolute et overflow: hidden nécessaires afin d'obtenir clip travailler.

Answer 4

style="overflow:hidden" pour les parents div et style="float: left" pour tous les enfants divs sont importants pour faire le divs aligner horizontalement pour les anciens navigateurs tels que IE7 et ci-dessous.

Pour les navigateurs modernes, vous pouvez utiliser style="display: table-cell" pour tous les enfants divs et il rendrait horizontalement correctement.

Answer 5

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

Answer 6

Flotteur: à gauche, l'affichage: le bloc-ligne n'aligne pas les éléments horizontalement s'ils dépassent la largeur du conteneur.

Il est important de noter que le conteneur ne doit pas envelopper si les éléments doivent afficher horizontalement: white-space: nowrap

Answer 7

Vous pouvez maintenant utiliser FlexBox pour aligner css divs horizontalement et verticalement si vous avez besoin.formule générale va comme ça

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 */ ; 
}