Hvordan lage flere kolonner med tekst i CSS

May 5

Publikasjoner som aviser og magasiner formatere tekst i kolonner for enklere lesing, siden øyet har en tendens til å vandre når du leser lange linjer med tekst. Siden Cascading Style Sheets nivå 3 (CSS3) har lagt eiendommer for formatering med flere kolonner, er dette en god effekt å legge til dine websider. Bruk flere kolonner for å bryte opp store biter av tekst og lang punktlister. Husk imidlertid at eldre nettlesere ikke vil støtte flere kolonner uten en Javascript-fallback.

Bruksanvisning

1 Åpne din CSS-filen i Notepad eller en kode editor og legge til en ny stil regel:

.text-kolonner {

}

Denne regelen velger noen HTML-element med en klasse navnet "tekst-kolonner." Du kan bruke dette senere for å legge til kolonne stiler til enhver tekst på websiden.

2 Angi antall kolonner ved hjelp av "-kolonnen-count" eiendom:

.text-kolonner {

column-count: 4;

}

Du kan stille uansett antall kolonner du ønsker for denne eiendommen, men husk Firefox vil ikke bryte opp lange ord, forårsaker dem til å flyte over i andre kolonner hvis du setter et for stort antall av dem. WebKit-baserte nettlesere Chrome og Safari gjør bryte opp ordene, skjønt.

3 Definere størrelsen på rennene mellom kolonner ved hjelp av "-kolonnen-gap" eiendom:

.text-kolonner {

kolonne-count: 4;

kolonne-gap: 10px;

}

Ikke bruk prosentverdier som "10%" i denne eiendommen, fordi nettlesere vil ignorere det. Du kan imidlertid bruke EMS til å gi kolonne hull størrelser i forhold til kolonnen teksten: "2em".

4 Legg kolonne reglene hvis du ønsker linjene som skiller kolonnene:

.text-kolonner {

kolonne-count: 4;

kolonne-gap: 10px;

kolonne-regel: 1px solid #eee;

}

Den "kolonne-regelen" eiendom tar tre verdier: regelen bredde, regel stil og farge. Disse verdiene fungerer akkurat som de av grenser. Du kan også angi stiler som "stiplede" for å lage en stiplet kolonne regelen. Vær oppmerksom på at reglene ser bedre inne større kolonne hullene av tjue piksler eller mer.

5 Duplicate alle kolonneegenskaper og legge til "-moz" prefiks til hver enkelt. Gjør det samme for "-webkit":

.text-kolonner {

kolonne-count: 4;

kolonne-gap: 10px;

kolonne-regel: 1px solid #eee;

-moz-kolonne-count: 4;

-moz-kolonne-gap: 10px;

-moz-kolonne-regelen: 1px solid #eee;

-webkit-kolonne-count: 4;

-webkit-kolonne-gap: 10px;

-webkit-kolonne-regelen: 1px solid #eee;

}

Dette vil legge til støtte for Firefox, Chrome og Safari før de fullt ut gjennomføre kolonner som standard. Opera støtter allerede CSS kolonner uten nettleser prefikser. Internet Explorer 9 støtter ikke dem i det hele tatt, men vil støtte dem fullt ut i versjon 10.

6 Åpne websiden i Notepad eller en kode editor og finne kodene for alle elementene der du vil gjøre teksten vises i kolonner. Legg til "tekst-kolonner" class navn:

Innhold her ...

</ Div>

Du kan legge til kolonner til andre typer tekst i tillegg til vanlig avsnitt. Legg til kolonner i punktlister eller nummererte lister, også.