CSS: consente di allineare orizzontalmente i div

Ho un contenitore div con fisso widthe height, con overflow: hidden.

Voglio una riga orizzontale di float: div sinistra all'interno di questo contenitore. I div che sono flottati a sinistra si spingeranno naturalmente sulla "linea" sottostante dopo aver letto il limite destro del loro genitore. Ciò accadrà anche se heightil genitore non dovesse permetterlo. Ecco come appare:

! [Sbagliato] [1] - rimossa l'immagine della baracca che era stata sostituita da un annuncio

Come vorrei che fosse:

! [Destra] [2] - rimossa l'immagine della baracca che era stata sostituita da un annuncio

Nota: l'effetto che desidero può essere ottenuto utilizzando elementi in linea & white-space: no-wrap(è così che l'ho fatto nell'immagine mostrata). Questo, tuttavia, non va bene per me (per ragioni troppo lunghe da spiegare qui), poiché i div figlio devono essere elementi a livello di blocco flottati.

Puoi mettere un div interno nel contenitore che sia abbastanza largo da contenere tutti i div flottati.

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

style="overflow:hidden"per i genitori dive style="float: left"per tutti i bambini divsè importante fare l' divsallineamento orizzontalmente per i vecchi browser come IE7 e inferiori.

Per i browser moderni, puoi usarlo style="display: table-cell"per tutti i bambini divse il rendering verrà eseguito correttamente in orizzontale.

Questo sembra vicino a quello che vuoi:

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

puoi utilizzare la clipproprietà:

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

annotare le position: absolutee overflow: hiddennecessarie per mettersi clipal lavoro.

Ora puoi usare css flexbox per allineare i div orizzontalmente e verticalmente, se necessario. la formula generale va così

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

child-div {
  width: /* yoursize for each div */
  ;
}

Float: left, display: inline-block non riusciranno ad allineare gli elementi orizzontalmente se superano la larghezza del contenitore.

È importante notare che il contenitore non dovrebbe avvolgere se gli elementi DEVONO essere visualizzati in orizzontale: white-space: nowrap

Falli galleggiare a sinistra. In Chrome, almeno, non è necessario avere un wrapper id="container", nell'esempio di LucaM.

Puoi fare qualcosa del genere:

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

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

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