Useiden sarakkeiden asettelu (Aikakauslehti) CSS3 lla
Yleensä ihmiset menettävät kappaleensa lukemalla erittäin pitkää sisältöä. Siksi lehdissä ja sanomalehdissä, kuten esimerkiksi lehdissä, sisältö on jaettu useisiin sarakkeisiin, jotta niitä voidaan lukea helposti.
Sarakkeen luominen Webissä on täysin erilainen tarina. Se on melko vaikeaa. Itse asiassa ei liian kauan sitten ehkä tarvitse jakaa sisältö manuaalisesti joihinkin divs ja liu'uta se oikealle tai vasemmalle ja määritä sitten leveys, pehmuste, marginaali, reunat ja niin edelleen.
Mutta asiat on nyt paljon yksinkertaistettu CSS3-monipylväsmoduuli. Kuten nimestä käy selvästi ilmi, tämä moduuli mahdollistaa sisällön jakamisen sanomalehdissä tai aikakauslehdissä näkyviin sarakkeisiin.
Selaimen tuki
Useita sarakkeita tuetaan tällä hetkellä kaikissa selaimissa - Firefox 2+, Chrome 4+, Safari 3.1+ ja Opera 11.1 - lukuun ottamatta Internet Explorerin ennustettua, mutta seuraava versio, IE10, näyttää alkaneen tukea tätä moduulia.
Muille selaimille Firefox tarvitsee edelleen toimiakseen -MOZ- etuliite, kun taas Chrome ja Safari tarvitsevat -webKit- etuliite. Opera ei vaadi etuliitteitä, joten voimme vain käyttää virallisia ominaisuuksia.
Lähde: Milloin voin käyttää CSS3 Multiple column layoutia?
Luo useita sarakkeita
Ennen kuin luomme sarakkeet, olemme laatineet HTML5: n sisälle käärittyjä demonstraatioita varten teksti-kappaleita tunniste seuraavasti;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc libero magna, venenatis quis aliquet et, rutrum in Augue. Donec vel time dolor. Donec volutpat fringilla porta. Suspendisse non nulla tortor. Quisque commodo ornare mi, sit amet aliquet justo bibendum ei. Integer bibendum convallis sapien, sit amet tincidunt orci placerat in. //ja niin edelleen
… Ja määrittele leveys 600px tyyli-arkista, se on niin.
Nyt aletaan luoda sarakkeita.
Alla olevassa esimerkissä jaamme sisällön kaksi saraketta kanssa sarake-count omaisuutta. Tämä ominaisuus kertoo selaimelle, että sisältö asetetaan sarakkeisiin määritetyn numeron mukaan ja anna selaimen päättää kunkin sarakkeen oikea leveys.
artikkeli -webkit-column-count: 2; -moz-sarake-määrä: 2; sarake-count: 2;
Lukumäärän määrittelemisen lisäksi sarakkeet voidaan luoda määrittämällä leveys käyttämällä sarakkeen leveys selaimesta ja päättää, kuinka monta saraketta pitäisi luoda.
Tässä esimerkissä määritetään sarakkeen leveys 150px, jonka tuloksena sisältö jaettiin kolmeen sarakkeeseen.
artikkeli -moz-column-width: 150px; -webkit-sarake-leveys: 150px; sarakkeen leveys: 150px;
Kuten spec. sarakkeen todellinen leveys voi olla leveämpi tai kapeampi kuin määritetty kolonnin leveys käytettävissä olevan tilan mukaan. Jos leveysarvoa ei myöskään ole nimenomaisesti määritelty, “auto” oletetaan oletusarvoiseksi, mikä voisi myös tarkoittaa “ei saraketta”.
Sarake Gap
Sarake Gap määrittele tilat, jotka erottavat kunkin sarakkeen. Raja-arvo voidaan ilmoittaa kohdassa em tai px, mutta kuten spec arvo ei voi olla negatiivinen. Alla olevassa esimerkissä määritellään aukko 30px, joten sarakkeiden väliset tilat näyttävät hieman laajemmilta.
artikkeli -webkit-column-gap: 30px; -moz-sarake-aukko: 30px; sarake-aukko: 30px;
Sarakkeen sääntö
Jos haluat lisätä reunuksia sarakkeen väliin, voit käyttää sarake-sääntö omaisuus, joka toimii hyvin samankaltaisesti kuin reunus omaisuutta. Sanotaan siis, jos haluamme laittaa katkoviivan kolonnin väliin, voimme kirjoittaa;
artikkeli -moz-column-rule: 1px pisteviiva #ccc; -webkit-column-rule: 1px pisteviiva #ccc; sarake-sääntö: 1px pisteviiva #ccc;
Sarake Span
Tämä ominaisuus toimii aivan samanlaisena kuin colspan sisään pöytä tag. Tämän ominaisuuden yleinen toteutus on sisällyttää sisällön otsikko kaikkiin sarakkeisiin. Tässä on esimerkki.
artikkeli h1 -webkit-column-span: all; sarake-span: kaikki;
Yllä olevassa esimerkissä määritimme H1 voit kattaa kaikki sarakkeet, ja jos sarake on määritetty, 1 oletuksena. Valitettavasti tämä ominaisuus, kun kirjoitat, toimii vain Opera ja Chrome.
Lopulliset sanat
Tämä on kaikki nyt, olemme tulleet läpi kaikki välttämättömät asiat luoda useita sarakkeita CSS3: lla, ja kuten olemme maininneet alussa, tämä moduuli toimii hyvin nykyaikaisissa selaimissa, mutta se ei toimi vielä Internet Explorerissa.
Loppujen lopuksi toivomme, että sinulla on nyt melko hyvä käsitys siitä, miten sarakkeita voidaan luoda CSS3: lla, ja jos sinulla on aikaa kokeisiin, voit jakaa menetelmiäsi ja tuloksiasi alla olevaan kommenttikenttään. Kiitos, että luet tämän viestin ja pidät hauskaa.
- esittely
- Lataa lähde
