February 05
07:032014
Sfruttando la proprietà float è possibile allineare in orizzontale due o più div all'interno di una pagina web. I div sono dei contenitori e normalmente si allineano uno sotto l'altro occupando in larghezza tutta la dimensione possibile, se non diversamente specificato. La proprietà float fa in modo che la loro dimensione, sempre se non diversamente specificato, rispecchi esattamente lo spazio necessario che il contenitore occupa nella pagina permettendo così al contenitore successivo di scalare di posizione ed affiancarsi al precedente.
<div style="float:left; display:block; width:150px; height:150px; background-color:#F00; border: solid 1px #000"></div>
<div style="float:left; display:block; width:150px; height:150px; background-color:#FF0; border: solid 1px #000"></div>
<div style="clear:both;"></div>Nell'esempio di cui sopra è chiaramente evidente il ruolo che gioca la proprietà "float:left", le altre proprietà dell'attributo style sono invece necessarie a scopo dimostrativo per l'esempio corrente in particolare "display:block" che afferma le dimensioni dei div date da width ed height che altrimenti verrebbero ignorate adattandosi al contenuto del div stesso; ed il background per distinguere i due blocchi.
Da notare invece il terzo div il cui attributo contiene la proprietà "clear:both", il cui scopo è quello di pulire le proprietà precedenti permettendo ad un eventuale successivo contenitopre di andare a capo e non allinearsi ai precedenti.
Buono ma se io volessi centrare i 2 div al centro di un terzo contenitore?
Ciao Gabriele, questo penso faccia al caso tuo: https://jsfiddle.net/michelepisani/b9roek5c/.
Grazie, articolo veramente ben fatto ed esaustivo. Una domanda: per mantenerli affincati in visualizzazione desktop va benissimo questo codice, ma in visualizzazione per farli traslare uno sopra ed uno sotto cosa devo fare? in pratica lato pc va benissimo che si vedano affiancati ma su mobile vorrei che traslassero uno sotto per l'atro, per una migliore visualizzazione. Grazie mille
Ciao mario,
il caso di cui stai parlando lo puoi gestire o con due fogli di stile diversi attivati in base alla risoluzione del dispositivo che ha caricato la pagina (metodo obsoleto) oppure (metodo consigliato) con il responsive design.
Devi utilizzare le media query (puoi farti un'idea qui: @ rules).
Ti ho preparato un esempio, dal quale puoi prendere spunto, in questo link: Allineare DIV in orizzontale (desktop) e in verticale (mobile) con le media queries.
Spero ti sia di aiuto.