CSS: allinea i div orizzontalmente
Domanda
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.
Soluzione
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>
Altri suggerimenti
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.
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.
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>
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
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 */ ;
}
Fateli galleggiare a sinistra.In Chrome, almeno, non è necessario avere un wrapper, id="container"
, nell'esempio di LucaM.