Layout a più colonne (simile a una rivista) con CSS3
In generale, le persone perderanno le tracce quando leggeranno contenuti estremamente lunghi. Ecco perché, nei mezzi di stampa come riviste e giornali, il contenuto è suddiviso in più colonne per una facile lettura.
Creare una colonna sul Web è una storia completamente diversa. È abbastanza difficile. In effetti, non molto tempo fa potrebbe essere necessario dividere il contenuto manualmente in alcuni divs e spostarlo a destra oa sinistra, quindi specificare la larghezza, il riempimento, il margine, i bordi e così via.
Ma ora le cose sono molto semplificate con CSS3 Multi Column Module. Come suggerisce chiaramente il nome, questo modulo ci consente di dividere il contenuto nel layout a colonne che vediamo nei giornali o nelle riviste.
Supporto del browser
Più colonne sono attualmente supportate in tutti i browser - Firefox 2+, Chrome 4+, Safari 3.1+ e Opera 11.1 - tranne, come previsto, Internet Explorer, ma la prossima versione, IE10, sembra aver iniziato a fornire supporto per questo modulo.
Per il resto dei browser, al fine di farlo funzionare, Firefox ha ancora bisogno del -moz- prefisso, mentre Chrome e Safari hanno bisogno del -webkit- prefisso. Opera non richiede alcun prefisso, quindi possiamo semplicemente usare le proprietà ufficiali.
Fonte: Quando posso usare il layout di colonne Multiple di CSS3?
Crea più colonne
Prima di creare le colonne, abbiamo preparato alcuni paragrafi di testo per la dimostrazione, racchiusi all'interno di HTML5 tag, come segue;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc libero magna, venenatis quis aliquet et, rutrum in agosto. Donec vel tempor dolor. Donec volutpat fringilla porta. Suspendisse non nulla tortor. Quisque commodo ornare mi, sit amet aliquet justo bibendum non. Integer bibendum convallis sapien, sit amet tincidunt orci placerat in. Integer vitae consequat augue. //e così via
... e specificare la larghezza per 600px dal foglio di stile, è tutto.
Ora, iniziamo a creare le colonne.
Nell'esempio seguente, suddivideremo il contenuto in due colonne con il column-count proprietà. Questa proprietà dirà al browser di rendere il contenuto in colonne per il numero specificato e lasciare che il browser decida la larghezza appropriata per ogni colonna.
article -webkit-column-count: 2; -moz-column-count: 2; column-count: 2;
Oltre a essere definito dal conteggio, le colonne possono essere create specificando la larghezza usando il larghezza della colonna proprietà e lasciando il browser per decidere quante colonne devono essere generate sul posto.
In questo esempio, specifichiamo la larghezza della colonna per 150px, che ha comportato la suddivisione del contenuto in tre colonne.
article -moz-column-width: 150px; -webkit-column-width: 150px; larghezza colonna: 150 px;
Come indicato nella specifica. la larghezza effettiva della colonna può essere più ampia o più stretta rispetto alla larghezza della colonna specificata, a seconda dello spazio disponibile. Inoltre, se il valore della larghezza non è specificato esplicitamente, il “auto” sarà considerato come predefinito, il che potrebbe anche significare “nessuna colonna”.
Colonna Gap
Colonna Gap definire gli spazi che separano ogni colonna. Il valore del gap può essere indicato in em o px, ma come indicato nelle specifiche il valore non può essere negativo. Nell'esempio seguente specificiamo il divario per 30px, quindi gli spazi tra le colonne sembrano un po 'più ampi.
article -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px;
Regola della colonna
Se si desidera aggiungere bordi tra la colonna, è possibile utilizzare il column-rule proprietà, che funziona molto simile al confine proprietà. Quindi, diciamo, se vogliamo mettere un confine tratteggiato tra la colonna, possiamo scrivere;
articolo -moz-column-rule: 1px punteggiato #ccc; -webkit-column-rule: 1px punteggiato #ccc; column-rule: 1px punteggiato #ccc;
Colonna Span
Questa proprietà funziona abbastanza simile al colspan nel tavolo etichetta. L'implementazione comune di questa proprietà consiste nell'ampliare il titolo del contenuto su tutte le colonne. Ecco un esempio.
articolo h1 -webkit-column-span: all; Colonna della vita: tutti;
Nell'esempio sopra abbiamo definito il h1 per estendersi su tutte le colonne e se l'estensione della colonna è specificata, 1 sarà preso come predefinito. Purtroppo questa proprietà, al momento della stesura di questo articolo, funziona solo su Opera e Chrome.
Parole finali
Questo è tutto per ora, abbiamo attraversato tutte le cose essenziali per creare più colonne con CSS3, e come abbiamo accennato all'inizio, questo modulo funziona molto bene nei browser moderni ma non funziona ancora in Internet Explorer.
In definitiva, ci auguriamo che ora abbiate una conoscenza abbastanza buona su come creare colonne con CSS3 e, se avete tempo per gli esperimenti, sentitevi liberi di condividere i vostri metodi e risultati nella casella dei commenti qui sotto. Grazie per aver letto questo post e per divertirti.
- dimostrazione
- Scarica fonte
