CSS. Impaginazione a colonne

Un esempio di come impaginare a colonne con html e css.
Nel mio caso ho utilizzato due div, uno per dividere in colonne e l’altro per dare l’altezza totale delle 4 colonne ed evitare che in automatico il browser riempia  l’ingombro suddividendo equamente il numero dellle righe. Testo giustificato e sillabato. Il tutto per un media > di 767px, altrimenti, colonna singola.

<div clas="four-columns"><div class=h400px">È universalmente riconosciuto...</div></div>
Questo il css
@media (min-width: 767px) {
div.h400px{height: 400px;}
div.four-columns{-webkit-column-count: 4; -moz-column-count: 4; column-count: 4; -webkit-column-gap: 18px; -moz-column-gap: 18px; 
column-gap: 18px;-webkit-column-rule: 1px solid lightblue; }}
È universalmente riconosciuto che un lettore che osserva il layout di una pagina viene distratto dal contenuto testuale se questo è leggibile.
Lo scopo dell’utilizzo del Lorem Ipsum è che offre una normale distribuzione delle lettere (al contrario di quanto avviene se si utilizzano brevi frasi ripetute, ad esempio “testo qui”), apparendo come un normale blocco di testo leggibile.
Molti software di impaginazione e di web design utilizzano Lorem Ipsum come testo modello. Molte versioni del testo sono state prodotte negli anni, a volte casualmente, a volte di proposito (ad esempio inserendo passaggi ironici).
Css Nessun commento