Pubblicato il 16/02/13 - aggiornato il  | 8 commenti :

Come allineare orizzontalmente più elementi DIV.

Come allineare orizzontalmente più elementi inseriti in singoli contenitori col tag DIV.
Smanettando con il modello o con il codice ci siamo spesso imbattuti nella necessità di allineare più elementi contenuti in un DIV sulla stessa linea retta orizzontale. Si potrebbe fare l'ipotesi di una serie di immagini inserite su una stessa linea orizzontale insieme alle loro descrizioni da essere visualizzate sotto ciascuna di esse. Se per inserire ciascuna immagine con descrizione usiamo un tag DIV ecco che le miniature appariranno in verticale e non allineate sulla stessa linea.

Questo perché il tag DIV comporta la creazione di un contenitore e quello successivo inserisce il nuovo contenitore con un salto di riga. Si può usare l'altro tag float:left; per allineare a sinistra due tag. Ma nel caso di più di due contenitori si hanno dei problemi con questo procedimento. Il tag float serve per spostare un elemento dal normale flusso per disporlo su uno dei due lati (float:left; o float:right;).



Per allineare dei contenitori sulla stessa linea orizzontale si può per esempio usare questo codice

<style type="text/css">div.allinea { float:left; margin-left:5px; }</style>
<div class="allinea" style="width:90px;height:90px;background-color:#ff00ff;">Primo DIV</div>
<div class="allinea" style="width:90px;height:90px;background-color:#ffff00;">Secondo DIV</div>
<div class="allinea" style="width:90px;height:90px;background-color:#00ffff;">Terzo DIV</div>
<div style="clear:both;" /></div>

che porta a questo risultato


Primo DIV
Secondo DIV
Terzo DIV

Il codice all'interno dei DIV è puramente dimostrativo. La riga <div style="clear:both;" /> è stata introdotta per impedire il posizionamento degli elementi su uno dei due lati. In sostanza si tratta di creare una classe allinea per poi fare in modo che gli elementi si posizionino uno accanto all'altro. Si può settare la distanza tra di essi attraverso il valore del margine sinistro.





Oltre a class si può usare anche il tag id  per personalizzare ciascun elemento in modo univoco. Un esempio di tre elementi DIV posizionati sulla stessa linea orizzontale potrebbe essere questo

<style type="text/css">
div.allinea { float:left; margin-left:10px; }
#colore1 {color:#003366; font-size:20px;}
#colore2 {color:#940F04; font-size:20px;}
</style>
<div class="allinea" id="colore1">Rosa Bianca</div>
<div class="allinea"><img src="https://lh3.googleusercontent.com/-p9YxLDVCHFw/UIabcJgQciI/AAAAAAAAbkg/iZeq93c9LOU/s1024/natura4.jpg" width="60px"/></div>
<div class="allinea" id="colore2">Molto richiesta</div>
<div style="clear:both;" /></div>

che porta a questo risultato


Rosa Bianca
Molto richiesta

Un tale codice può essere incollato su Layout > Aggiungi un gadget > HTML/Javascript oppure incollato in Modalità HTML in un post o in una pagina.


8 commenti :

  1. ciao Ernesto, avrai visto che la newsletter è arrivata senza titolo del post in oggetto, è successo anche a me, sono saltati su feedburner, bisogna reimpostarli

    RispondiElimina
  2. Ciao Ernesto, questo è il mio blog: http://antigapalavra.blogspot.it/p/home.html
    Come vedi, il gadget sulla destra è più basso rispetto al corpo centrale: sai come posso metterli allo stesso livello? Inoltre vorrei ridurre qualche spazio bianco di troppo, ad es. sotto lo slideshow.
    Grazie mille se puoi aiutarmi.

    RispondiElimina
    Risposte
    1. Per ridurre lo spazio leggi questo post
      http://www.ideepercomputeredinternet.com/2015/06/blogger-distanze-elementi-layout.html
      Per la prima domanda francamente non vedo il problema. Si potrebbe spostare in alto tutta la sidebar ma non è cosa facile e avrebbe delle forti controindicazioni
      @#

      Elimina
  3. Buonasera Ernesto,
    Sapresti come posso allineare questi tre div in orizzontale?
    Il primo a sinistra, il secondo al centro e il terzo a destra.
    file:///F:/Informatica/3%C2%B0B/Web/Progetto_fineANNO/home.html

    RispondiElimina
    Risposte
    1. Mi hai dato il link del percorso del tuo computer :)
      Per condividere una immagine va prima postata online su un servizio tipo Imgur
      @#

      Elimina
  4. Ciao Ernesto, ho fatto tutto ciò che hai scritto e ho incollato la seconda parte, ora sul mio sito c'è scritto "Rosa bianca molto richiesta" e non riesco piu a toglierlo. sono disperata e purtroppo inesperta..

    RispondiElimina
    Risposte
    1. Scusa, avevo lasciato questo commento senza risposta.
      Non so quale sia il tuo sito e quindi mi riesce difficile comprendere quello che è successo. Dove lo hai incollato? In un widget o in un post? Se lo hai incollato in un widget basta che tu vada su Layout e trovi il widget in oggetto quindi lo elimini. Se è in un post, vai su Modifica e con Ctrl+F cerchi il codice per poi cancellarlo
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy