Višestruki raspored stupaca (sličan magazinu) s CSS3
U principu, ljudi će izgubiti trag kada čitaju izuzetno dugačak sadržaj. Zato je u tiskanim medijima, kao što su časopisi i novine, sadržaj podijeljen u više stupaca za lako čitanje.
Stvaranje stupca na webu potpuno je druga priča. To je vrlo teško. Zapravo, ne tako davno ćete možda morati ručno podijeliti sadržaj na neke divs i plutaju ulijevo ili udesno, a zatim odredite širinu, padding, marginu, granice i tako dalje.
No, stvari su sada znatno pojednostavljene CSS3 Modul s više stupaca. Kao što ime jasno implicira, ovaj modul nam omogućuje da podijelimo sadržaj u raspored u stupcima koji vidimo u novinama ili časopisima.
Podrška za preglednik
Više stupaca trenutno je podržano u svim preglednicima - Firefox 2+, Chrome 4+, Safari 3.1+ i Opera 11.1 - osim, kao što je predviđeno, Internet Explorer, ali izgleda da je sljedeća verzija, IE10, počela pružati podršku za ovaj modul.
Za ostale preglednike, kako bi to funkcioniralo, Firefoxu i dalje treba -moz- , dok Chrome i Safari trebaju -WebKit- prefiks. Opera ne zahtijeva nikakve prefikse, tako da možemo koristiti službena svojstva.
Izvor: Kada mogu koristiti CSS3 višestruki raspored stupaca?
Stvorite više stupaca
Prije izrade stupaca pripremili smo nekoliko tekstualnih odlomaka za demonstraciju, omotanu unutar HTML5 kao što slijedi;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc libero magna, venenatis quis aliquet et, rutrum u kolovozu. Donec vel tempor dolor. Donec volutpat fringilla porta. Suspendisse non nulla tortor. Quisque commodo ornare mi, sjedi amet aliquet justo bibendum non. Integer bibendum convallis sapien, sjedi amet tincidunt orci placerat u. Integer vitae posledica augue. //i tako dalje
… I odredite širinu za 600px iz stila, to je to.
Počnimo stvarati stupce.
U donjem primjeru podijelit ćemo sadržaj na dva stupca s kolona-count nekretnine. Ovo svojstvo će reći pregledniku da prikaže sadržaj u stupce prema navedenom broju i neka preglednik odredi ispravnu širinu za svaki stupac.
članak -webkit-kolona-broj: 2; -moz-kolona-kut: 2; stupac Broj: 2;
Osim što je definirano brojem, stupce se može kreirati navođenjem širine pomoću stupac širine i ostavljajući preglednik da odluči koliko stupaca treba generirati na mjestu.
U ovom primjeru navodimo širinu stupca za 150px, što je rezultiralo podjelom sadržaja u tri stupca.
članak -moz-column-width: 150px; -webkit-širina stupca: 150px; širina stupca: 150px;
Kao što je navedeno u specifikaciji. stvarna širina stupca može biti šira ili uža od specificirane širine stupca ovisno o dostupnom prostoru. Isto tako, ako vrijednost širine nije izričito specificirana, “auto” će se uzeti kao zadani, što također može značiti “bez stupca”.
Razmak stupaca
Razmak stupaca definirajte razmake koji razdvajaju svaki stupac. Vrijednost praznine se može navesti u em ili px, ali kako je navedeno u specifikaciji vrijednost ne može biti negativna. U donjem primjeru navodimo jaz za 30px, tako da razmaci između stupaca izgledaju malo šire.
članak -webkit-column-gap: 30px; -moz-gap-gap: 30px; razmak između stupaca: 30px;
Pravilo stupca
Ako želite dodati granice između stupca, možete upotrijebiti stupac pravilo imovine, koja radi vrlo slično granica nekretnine. Dakle, recimo, ako želimo staviti točku između stupca, možemo pisati;
članak -moz-column-rule: 1px označen #ccc; -webkit-column-rule: 1px točkasto #ccc; column-rule: 1px označeno #ccc;
Razmak stupaca
Ovo svojstvo djeluje vrlo slično colspan u stol označiti. Uobičajena implementacija ovog svojstva je obuhvatiti naslov sadržaja u svim stupcima. Evo primjera.
članak h1 -webkit-column-span: sve; kolona vijek: sve;
U gornjem primjeru definirali smo h1 za raspon svih stupaca i ako je određen raspon stupca, 1 bit će zadana. Nažalost, ovo svojstvo, u vrijeme pisanja ovog teksta, radi samo u Operau i Chromeu.
Završne riječi
To je sve za sada, došli smo kroz sve bitne stvari za stvaranje više stupaca s CSS3, i kao što smo spomenuli na početku, ovaj modul dobro radi u modernim preglednicima, ali još ne radi u programu Internet Explorer.
Na kraju, nadamo se da sada imate prilično dobro razumijevanje o tome kako stvoriti stupce s CSS3, a ako imate vremena za eksperimente, slobodno podijelite svoje metode i rezultate u okviru za komentare u nastavku. Hvala vam što ste pročitali ovaj post i zabavite se.
- Demo
- Preuzimanje izvora
