Corsi on-line

Allineare orizzontalmente più divbox con CSS

L’allineamento orizzontale delle divbox è (o meglio era) una delle operazioni più seccanti tra quelle che uno sviluppatore deve effettuare nella realizzazione di un frontend; in passato si poteva ricorrere alle tabelle per ottenere il medesimo risultato, da tempo però queste ultime non possono essere utilizzate per la delimitazione delle componenti di pagina ed è opportuno ricorrere alle regole di stile. A tal proposito CSS3 mette a disposizione un’apposita proprietà chiamata box-sizing.

css3In sostanza tale costrutto potrà essere utilizzato per comunicare al Web browser le dimensioni espresse in termini di larghezza e altezza che dovranno essere associate all’elemento coinvolto potendone specificare anche la posizione; passando alla proprietà, introducendo l’argomento content-box (che è poi quello di default per box-sizing), le dimensioni specificate faranno riferimento ai soli contenuti, utilizzando invece l’argomento border-box larghezza e altezza includeranno non solo in contenuto, ma anche padding (cioè lo spazio intorno al contenuto) e bordi, escludendo i margini.

Il semplice esempio proposto di seguito mostra come box-sizing possa essere impiegato facilmente per l’allineamento orizzontale di due divbox (associate al selettore CSS small-div), ognuna di esse occuperà esattamente il 50% dello spazio messo a disposizione dalla divbox che fungerà da contenitore (big-div) :

<!DOCTYPE html>
<html>
<head>
<style> 
div.big-div {
    width: 50em;
    border: 5px solid #5A6351;
}
div.small-div {
    box-sizing: border-box;
    width: 50%;
    border: 3px dashed #9CBA7F;
    float: left;
}
div.end {
    clear:both;
}
</style>
</head>
<body>
<div class="big-div">
<div class="small-div">Contenuto prima div-box.</div>
<div class="small-div">Contenuto seconda div-box.</div>
<div class="end"></div>
</div>
</body>
</html>

Per comodità del lettore nell’esempio precedente è presente per intero il codice della pagina che mostrerà le due divbox allineate; l’utilizzatore avrà comunque la possibilità di incrementare il numero di queste ultime agendo innanzitutto sulla percentuale di spazio occupato in senso orizzontale, quindi relativamente alla larghezza del contenitore:

div.small-div {
    ....
    width: 25%;
    ...
}

Se, come appena mostrato, lo spazio destinato a ciascun elemento contenuto dovesse essere pari al 25%, avremo la possibilità di allineare fino a 4 diverse diverse dixbox attraverso una modifica come la seguente:

<div class="big-div">
  ...
<div class="small-div">Contenuto terza div-box.</div>
<div class="small-div">Contenuto quarta div-box.</div>
  ...
</div>

Nello stesso modo, quindi agendo sempre sulla percentuale di spazio occupato, si potrà inserire un maggior numero di divbox nel contenitore, ad esempio 5 nel caso di una percentuale pari al 20%.

Post correlati
I più letti del mese
Tematiche