Vairāku sleju izkārtojums (līdzīgi žurnālam) Ar CSS3
Kopumā, lasot ļoti ilgu saturu, cilvēki zaudēs dziesmu. Tāpēc drukātajos plašsaziņas līdzekļos, piemēram, žurnālos un laikrakstos, saturs ir sadalīts vairākās kolonnās, lai to viegli lasītu.
Kolonnas izveide tīmeklī ir pilnīgi atšķirīgs stāsts. Tas ir diezgan grūti. Faktiski, ne pārāk sen var būt nepieciešams manuāli sadalīt saturu dažos divs un peldiet to pa labi vai pa kreisi, pēc tam norādiet platumu, polsterējumu, margu, robežas un tā tālāk.
Taču lietas tagad ir daudz vienkāršākas CSS3 vairāku kolonnu modulis. Kā skaidri norāda nosaukums, šis modulis ļauj mums sadalīt saturu kolonnveida izkārtojumā, ko redzam laikrakstos vai žurnālos.
Pārlūka atbalsts
Pašlaik visās pārlūkprogrammās tiek atbalstītas vairākas slejas - Firefox 2+, Chrome 4+, Safari 3.1+ un Opera 11.1 - izņemot, kā paredzēts Internet Explorer, bet nākamā versija IE10, šķiet, ir sākusi sniegt atbalstu šim modulim.
Pārējiem pārlūkiem, lai tas darbotos, Firefox joprojām ir nepieciešams -moz- prefikss, bet Chrome un Safari ir nepieciešams -webkit- priedēklis. Opera neprasa nekādus prefiksus, tāpēc mēs varam vienkārši izmantot oficiālās īpašības.
Avots: Kad var izmantot CSS3 vairāku kolonnu izkārtojumu?
Izveidot vairākas kolonnas
Pirms kolonnu izveides mēs esam sagatavojuši dažas teksta daļas demonstrācijai, kas ietītas HTML5 iekšpusē atzīmējiet, kā norādīts tālāk;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc libero magna, venenatis quis aliquet et, rutrum in augue. Donec vel laiki. 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. //un tā tālāk
… Un norādiet platumu 600px no stila lapas, tas ir viss.
Tagad, sāksim veidot kolonnas.
Tālāk redzamajā piemērā mēs sadalīsim saturu divas kolonnas Ar kolonnu skaits īpašums. Šī īpašība pārlūkprogrammai rādīs saturu, kas norādīts kolonnās pēc norādītā numura, un ļaujiet pārlūkam izlemt pareizu platumu katrai kolonnai.
raksts -webkit-column-count: 2; -moz-column-count: 2; kolonnu skaits: 2;
Izņemot skaitļus, kolonnas var izveidot, norādot platumu, izmantojot kolonnas platums īpašumā un atstājot pārlūkprogrammu, lai izlemtu, cik kolonnu vajadzētu izveidot vietā.
Šajā piemērā mēs precizējam kolonnas platumu 150px, kuru saturs tika sadalīts trīs slejās.
raksts -moz-column-width: 150px; -webkit-slejas platums: 150px; kolonnas platums: 150px;
Kā norādīts specifikācijā. faktiskais kolonnas platums var būt plašāks vai šaurāks par norādīto kolonnas platumu atkarībā no pieejamās telpas. Arī tad, ja platuma vērtība nav skaidri norādīta, “auto” tiks uzskatīts par noklusējumu, kas arī varētu nozīmēt “nav kolonnas”.
Ailes sleja
Ailes sleja definēt atstarpes, kas atdala katru kolonnu. Atšķirības vērtību var norādīt em vai px, bet kā norādīts specifikācijā vērtība nevar būt negatīva. Turpmāk sniegtajā piemērā mēs precizējam atšķirību 30px, tāpēc atstarpes starp kolonnām izskatās nedaudz plašākas.
raksts -webkit-column-gap: 30px; -moz-kolonnas sprauga: 30px; kolonnu starpība: 30px;
Kolonnas noteikums
Ja vēlaties pievienot robežas starp kolonnu, varat to izmantot slejas noteikums īpašums, kas darbojas ļoti līdzīgi robežu īpašums. Tātad, pieņemsim, ja mēs vēlamies ievietot punktētu robežu starp kolonnu, mēs varam rakstīt;
raksts -moz-column-rule: 1px punktēts #ccc; -webkit-column-rule: 1px punktēts #ccc; slejas noteikums: 1px punktēts #ccc;
Kolonnas span
Šis īpašums darbojas diezgan līdzīgi colspan iekšā tabula tag. Šīs īpašības kopīga īstenošana ir satura virsraksta aptveršana visās slejās. Šeit ir piemērs.
raksts h1 -webkit-column-span: all; kolonnu diapazons: visi;
Iepriekš minētajā piemērā mēs definējām h1 lai aptvertu visas kolonnas, un ja ir norādīts slejas diapazons, 1 tiks uzskatīts par noklusējumu. Diemžēl šī īpašība šī rakstīšanas laikā darbojas tikai operētājsistēmā Opera un Chrome.
Galīgie vārdi
Tas viss ir pagaidām, mēs esam nonākuši cauri visām būtiskajām lietām, lai izveidotu vairākas kolonnas ar CSS3, un, kā mēs jau minējām sākumā, šis modulis darbojas ļoti labi mūsdienu pārlūkprogrammās, bet tas vēl nedarbojas pārlūkprogrammā Internet Explorer.
Galu galā mēs ceram, ka jums tagad ir diezgan laba izpratne par to, kā veidot kolonnas ar CSS3, un, ja jums ir laiks eksperimentiem, lūdzu, dalieties savās metodēs un rezultātos zemāk esošajā komentāru lodziņā. Paldies, ka lasījāt šo ziņu un ir jautri.
- Demo
- Lejupielādēt avotu
