CSS: allinea i div orizzontalmente

Question

Ho un div contenitore con larghezza e altezza fisse, con overflow:nascosto.

Voglio una riga orizzontale di float:div lasciati all'interno di questo contenitore.I div con float a sinistra si spingeranno naturalmente sulla "linea" sottostante dopo aver letto il limite destro del loro genitore.Ciò avverrà anche se l'altezza del genitore non dovesse consentirlo.Ecco come appare:

![Sbagliato][1] - rimossa l'immagine della baracca che era stata sostituita da una pubblicità

Come vorrei che fosse:

![Destra][2] - rimossa l'immagine della baracca che era stata sostituita da una pubblicità

Nota:l'effetto che desidero può essere ottenuto utilizzando elementi in linea e spazi bianchi: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 con float.

Answer 1

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

Answer 2

style="overflow:hidden" per genitore div E style="float: left" per tutto il bambino divs sono importanti per realizzare il divs allinea orizzontalmente per i vecchi browser come IE7 e precedenti.

Per i browser moderni, puoi utilizzare style="display: table-cell" per tutto il bambino divs e renderebbe orizzontalmente correttamente.

Answer 3

puoi usare il clip proprietà:

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

notare la position: absolute E overflow: hidden necessario per ottenere clip lavorare.

Answer 4

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>

Answer 5

Galleggiante:a sinistra, visualizzazione:inline-block non riuscirà ad allineare gli elementi orizzontalmente se superano la larghezza del contenitore.

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

Answer 6

Ora puoi utilizzare CSS flexbox per allineare i div orizzontalmente e verticalmente, se necessario.la formula generale funziona così

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

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