Il Consorzio di World Wide Web aggiunto il supporto multi-colonna all'elenco in continua espansione delle proprietà del foglio di stile CSS a partire con le raccomandazioni di CSS3. Proprietà delle colonne in CSS trasformare blocchi di testo in paragrafi colonna-avvolto o elenchi. È possibile applicare colonne a immagini contenenti testo, troppo. Utilizzare le proprietà della colonna per impostare il numero di colonne, la loro larghezza, la spaziatura tra le colonne e persino aggiungere linee tra le colonne. Aggiungere prefissi vendor e i fallback di JavaScript per rendere le colonne di lavorare in tutti i browser.

Istruzioni

1

Individuare il testo nel documento HTML in cui si desidera applicare lo stile multicolonna. Quando l'applicazione multi-colonna word wrap per elenchi puntati, destinazione il tag padre "< ul >" che avvolge il tag "< li >". Per blocchi di testo, è necessario applicare lo stile alla contenente "< div >" o la "sezione < >" tag.

2

Aggiungere una classe o un attributo ID al tag HTML, a seconda delle esigenze. Classi e ID consentono di selezionare i tag dal nome in codice CSS. È possibile utilizzare classi il più tag, ma CSS richiede che ogni attributo ID in un singolo file HTML è unico. Ad esempio, un tag HTML che contiene una classe sia un attributo ID assomiglia a questo: < div class = "myclass colonne" id = "intro" > contenuto qui... < / div >. Si noti che è possibile specificare più di un nome di classe per un tag. Si può fare lo stesso per l'attributo ID, però.

3

Aprire il tuo file CSS esterno o aggiungere "stile < >" tag tra i tag "< head >" del documento HTML. Selezionare il tag HTML e quindi impostare la proprietà "column-count" al numero di colonne desiderate. Ad esempio, utilizzare un codice simile al seguente:

.Columns #intro () {

numero di colonne: 4;

}

Utilizzare un punto davanti a qualsiasi nome di classe e un simbolo di cancelletto davanti a qualsiasi nomi di ID. È anche possibile selezionare il nome di tag, senza l'uso di eventuali simboli di prefisso.

4

Impostare le proprietà "colonna-gap" e "larghezza della colonna" i valori desiderati. È inoltre possibile impostare "column-rule" per creare linee tra le colonne. Utilizzare "column-rule" come se fosse il "confine" proprietà CSS. Questo esempio formatta tutti i tag di "sezione < >" per l'utilizzo di due colonne con una regola di grigio tra di loro:

sezione {

numero di colonne: 2;

colonna-gap: 20px;

colonna-regola: 1px solid #bbb;

}

5

Duplicare il tuo proprietà CSS relative alla colonna e quindi aggiungere prefissi vendor a loro. A partire da maggio 2011, è necessario aggiungere i prefissi per Mozilla e browser basati su Webkit. Questo esempio mostra i prefissi due vendor che è necessario utilizzare:

sezione {

numero di colonne: 2;

-webkit-column-count: 2;

-moz-column-count: 2;

}

Consigli & Avvertenze

• Evitare di utilizzare la proprietà "larghezza della colonna" ove possibile. Consentire il browser calcolare le larghezze automaticamente per evitare mal di testa e tenere conto delle differenze di rendering del browser ingannevole.
• Internet Explorer 9 e di seguito non supportano CSS colonne. Aggiungere un fallback di JavaScript per rendere le colonne funziona nei browser Internet Explorer.