Kako se mogu napraviti stubovi
Prvo, pogledajmo samo nekoliko načina na koje možete napraviti stupce, a zatim ćemo prijeći na nekoliko primjera.
Korištenje plutajućih blokova. Danas je ovo najpopularniji način izrade zvučnika, iako flexbox polako počinje da ga zatrpava. Po defaultu, dva bloka u normalnom toku ne mogu biti na istoj liniji, ali ovo ponašanje se može lako promijeniti postavljanjem oba svojstva float: lijevo | u pravu. Počeće da se privijaju uz lijevu ili desnu ivicu. Da bi blok koji ih prati mogao uočiti plutajuće blokove i pravilno ih postaviti, mora biti jasno napisano: oboje.
Uz pomoć plovaka najčešće se izrađuju 2 ili 3 stupca. Izgled stranice s plutajućim blokovima nije jako težak, samo trebate znati neke od nijansi njihovog ponašanja. Na primjer, ako trebate napraviti područje za prikaz članaka, a s desne strane - bočnu traku s izbornikom, tada plutajući blokovi vrlo lako implementiraju ovaj raspored.
Korišćenje tabela. Tabele su općenito kreirane za prikaz velikog broja ćelija i kolona, tako da je pravljenje kolona u njima jednostavno. Tabela može imati najmanje 20 kolona. Njegova cijela struktura je postavljena u html-kodu, pa se ispostavlja da je kod prilično glomazan.
Budući da se ćelije u tabeli mogu podesiti na bilo koju veličinu, skoro sve stranice su se koristile za raspored. Na primjer, da bi se implementirao najjednostavniji izgled (zaglavlje, sadržaj, bočna traka, podnožje), napravljena su tri reda u tabeli (red tabele je formiran oznakom tr). Svaki red sadrži dvije ćelije jer sadržaj i bočna traka moraju biti odvojeni jedan od drugog. A u zaglavlju i podnožju ove ćelije su jednostavno povezane pomoću atributa colspan oznake td, ako je potrebno.
Možete lako ukloniti granicu sa ćelija, što je web programerima olakšalo postavljanje šablona koji su bili složene strukture.
Sa flexboxom. Riječ je o modernoj tehnologiji koja se počela širiti 2014. godine, iako je postojala i prije toga. Njegova suština je sljedeća: kreira se jedan opći blok kontejnera, u koji se postavljaju drugi blokovi, koje će trebati napraviti u obliku stupaca, zatim prikaz: ovom kontejneru mora biti dodijeljen flex.
Zatim obično postavljate svojstvo flex-direction, koje određuje smjer glavne ose duž koje će kutije biti pozicionirane. Vrijednosti se mogu postaviti na: red i stupac. Prva vrijednost će usmjeriti blokove vodoravno s desna na lijevo, druga - prema dolje. Možete postaviti i obrnuto: flex-direction: row-reverse. Blokovi će se nalaziti s desna na lijevo.
Također postoji skup zasebnih svojstava za podređene blokove flex kontejnera. U osnovi, ova svojstva vam omogućavaju da postavite veličinu bloka i njegovo ponašanje u odnosu na druge elemente.
Prednost flexboxa je što je mnogo fleksibilniji. Ako su u blok rasporedu web programeri često morali sve izračunati piksel po piksel, postavljajući ispravne uvlake, dodajući razne trikove u kod da se sve ne raspadne, onda flex elementi lako stoje u koloni, u nizu i općenito zahtijevaju mnogo manje matematičkih proračuna izvana.
Razbijanje teksta u kolone
Međutim, još se nisam dotakao najvažnije teme. CSS danas nudi mogućnost razdvajanja teksta u glavnom okviru bez potrebe za plutajućim okvirima, tabelama ili flexboxovima. Odnosno, jedan regularni blok ostaje u html-u, a tekst se dijeli na kolone isključivo zahvaljujući css-u.
Dakle, dolje navedena svojstva primjenjuju se na blok u kojem tekst treba podijeliti u nekoliko kolona.
Column-count - svojstvo postavlja broj kolona na koje treba podijeliti tekst. Preporučljivo je postaviti vrijednost od 2 do 4, ovisno o tome kako vam se sviđa.
Širina kolone - postavlja broj znakova teksta u jednoj koloni. Naglašavam da širina kolone u ovom slučaju nije određena pikselima, već brojem znakova. Optimalno: 30-50 znakova u jednoj koloni. Takođe, ovo svojstvo se nikako ne može nazvati cross-browser, jer postavljate samo željeni broj karaktera, ali da li će pretraživač postupiti u skladu sa vašim željama još nije poznato.
Column-gap - definira jaz između kolona. Može se podesiti u pikselima.
Pravilo kolone - Crta liniju koja razdvaja kolone. Sintaksa svojstva je identična svojstvu granice. Prvo se snima debljina linije, zatim njen tip, a zatim boja.
Takođe bih želeo da napomenem da su sva ova css svojstva relativno nova. Na primjer, Internet Explorer ih podržava samo od desete verzije. Ovo su svojstva iz CSS3 standarda, pa ako ćete ih koristiti na svom sajtu, onda morate voditi računa o kompatibilnosti između pretraživača, inače neće biti kolona u starijim verzijama Opera i IE.
Primjeri
Plutajući blokovi. Izgled stranice u dvije kolone najčešće se radi vrlo jednostavno pomoću plutajućih blokova. U css-u se implementira ovako:
Float-block1 (float: lijevo) .float-block2 (float: lijevo) blok koji bi trebao biti ispod plutajućih (čisto: lijevo | oba)
To jest, donji blok mora biti specificiran sa ovim svojstvom tako da je ispravno pozicioniran. Tako će plutajuće kutije postati jedna linija ako su dovoljno široke u roditeljskom elementu. Naravno, također morate odrediti širinu, visinu i granicu blokova, tako da izgleda kao na ovom snimku ekrana:
Sada idemo na zabavni dio. Dodajmo puno nasumičnog teksta u glavni blok i pokušamo ga prikazati u tri kolone, kao u novinama ili časopisu. Da biste to učinili, morate dodati takva pravila u kod ovog bloka.
U današnjem članku želim govoriti o novom načinu kreiranja kolona jednake visine koristeći CSS. Više ne morate da koristite Javascript da bi visine kolona bile iste za sve. Suština ove metode je korištenje novog CSS3 svojstva koje nam daje puno više opcija od pukog kreiranja stupaca iste visine. Ali u ovoj lekciji ćemo pogledati koliko je lako riješiti ovaj bolan problem.
Izgled stranice
HTML dio
Definirajmo dvije kolone koje ćemo u budućnosti napraviti istu visinu koristeći CSS:
| 1 2 3 4 5 6 7 8 | id = "stranica"> <div id = "glavni"> </ div> |
To jest, moramo napraviti blok Definirajmo flexbox za glavni kontejner, koji sadrži dva kutija: Fino! Sada ostaje podesiti širinu za središnji blok s glavnim sadržajem i za bočnu traku: Objašnjenja: Naša stranica je blizu završetka. Ali kada se glavni blok sadržaja smanji, stranica postaje veoma duga. Stoga, za određenu širinu ekrana, možemo učiniti da bočna traka ide ispod bloka s glavnim sadržajem i da se lako pregledava na mobilnim uređajima: Evo koda bez prefiksa tako da ne zauzima puno prostora i ne izgleda glomazno. Možete imati potpuno funkcionalan primjer koristeći dugme na početku članka. Također morate reći gdje ova metoda funkcionira. Pošto je ovo svojstvo prilično novo, radi u modernim pretraživačima Firefox, Chrome, Safari, Opera i IE 11. U ovom članku naučili ste kako napraviti stupce jednake visine koristeći CSS. Ali to nisu sve mogućnosti ovog CSS svojstva. Svojstvo flex vam omogućava da kutije učinite fluidnim, automatski rasporedite stavke u više kolona ili redova, zauzimajući cijelu slobodnu površinu i još mnogo toga. Ali najosnovnije i, što je najvažnije, često korišteno rješenje za izgled stranice, razmotrili smo u ovom članku. Ova stranica sadrži primjere koji će vam pomoći stubovi iste visine u rasporedima sa blok rasporedom. Za mnoge početnike dizajnera izgleda, ovo predstavlja određeni problem, jer ako visina nije eksplicitno naznačena u kolonama izgleda, onda se oni protežu tek toliko da prihvate svoj sadržaj. Shodno tome, ispada da umjesto iste visine, svaka kolona u rasporedu ima svoju, što ne izgleda baš lijepo. Radi jasnoće, svi primjeri koriste rasporede sa pritisnuto podnožje... Stoga vam skrećem pažnju na činjenicu da su neki blokovi ili CSS svojstva koji su uključeni u kreiranje kolona iste visine već inicijalno prisutni u rasporedu. To jest, na kraju obavljaju dvostruke funkcije - pritiskaju podnožje na dno i povlače stupove. Međutim, radi veće pogodnosti, isporučuje se samo ona svojstva koja povlače stupce CSS komentari, i nije bitno da li se koriste u neku drugu svrhu ili ne. Ovaj primjer se temelji na principu dodatnih pseudo-kolona i apsolutnog pozicioniranja. Za to se kreira nekoliko blokova (po broju kolona) koji se razvlače do pune visine stranice i postavljaju ispod pravih kolona. Da bi se pojavio efekat kolona iste visine, ove pseudokolone se postavljaju na potrebnu boju pozadine. Budući da Internet Explorer 6 ima problema sa ovom metodom kreiranja kolona iste visine, nekoliko hacks: Ovaj primjer je najjednostavniji za implementaciju i sastoji se od stvaranja male "horizontalne" slike, koja se sastoji od nekoliko boja (po broju kolona), koja se zatim "množi" okomito, imitirajući stupce. Nažalost, ova metoda je prikladna samo za fiksne izglede, osim toga, ne zaboravite da u pregledniku neće biti stupaca s onemogućenim slikama.
Može se vidjeti pozadinska slika korištena u primjeru. Uz to je stvoren izgled stubova iste visine. Ovaj primjer koristi prilično neobičnu tehniku. Prvo, svim stupcima daju se vrlo velike donje margine, zbog čega se protežu, a zatim su donje margine iste veličine, ali negativne vrijednosti. Na kraju se sve što je „suvišno“ jednostavno odsiječe.
Ova metoda je unakrsna i svi je razumeju, uključujući i Internet Explorer 6. Ali zajedno sa načinom na koji je pritisnuto podnožje, odbija da radi ispravno. Nisam smislio više štaka za ovog starca, već naprotiv uklonio sam par svojstava koja mu pomažu da pritisne podnožje. Stoga, kada dodajete sadržaj u kolone - u IE6 se sve vuče prema očekivanjima. Sa pojavom toliko različitih veličina i rezolucija ekrana, postalo je neverovatno nepraktično kreirati dizajn sa fiksnim blokovima teksta koji se prostiru čitavom širinom ekrana. Tradicionalni pristup je da se tekst podijeli u dvije kolone, a to se često radi ručno i oduzima mnogo vremena. Ili se tekst dijeli pomoću javascripta, što nije prikladno za sve situacije. Takođe, trebalo bi da budemo u mogućnosti da to uradimo sa CSS-om bez pribegavanja grid sistemima ili plutajućim sistemima, zar ne? CSS3 vam zapravo daje mogućnost da podijelite tekst u više kolona, kao i da odredite veličinu žljebova (razmak između kolona), tako da možete imati potpunu kontrolu nad kolonama, umjesto da koristite okvir ili sistem mreže. Osim toga, CSS3 pruža odlične rezerve u slučaju da korisnik koristi, na primjer, Netscape Navigator - izgled vaše stranice će i dalje izgledati sjajno. Podrška za pretraživač
Važno je napomenuti da dok gotovo svi moderni pretraživači podržavaju više kolona u CSS3 (da, čak i IE10), mnogi stariji pretraživači poput IE9 ne pružaju ovu podršku. Iako je podrška prilično dobra, možda ćete morati da koristite prefikse pretraživača za webkit (-webkit-) i mozilla (-moz-). Međutim, ne morate koristiti -ms- ili -o- za IE i Opera, jer oni dolaze s potpunom ili djelomičnom podrškom. Ovo CSS svojstvo vam daje dosta opcija za kontrolu načina na koji se vaš sadržaj prikazuje u prozoru preglednika, a pogledajmo ove opcije: * kolona-broj: ovdje možete odrediti broj stupaca koji će se prikazati u elementu. Uz sve ove opcije, ne osjećamo da nam treba više za kontrolu kolona. Naravno, za normalan rad više zvučnika nisu nam nužno potrebni svi ovi parametri. Štaviše, u osnovi nam je potreban samo parametar column-count, ali ćete verovatno uvek koristiti i column-gap kako se tekst kolone ne bi stopio sa njenim granicama. Da bismo ovo sproveli u praksu, potrebno nam je samo nekoliko linija koda: / * Ovo će proizvesti izgled od 3 kolone sa razmakom od 20px između svake kolone * / / * Ovo će proizvesti raspored od 3 kolone i razmak od 20px između svake kolone i pravilo od 1px pune crne * / Cols3 ( / * Ovaj h1 će zauzeti prostor od 3 kolone * / A sada želimo da vam ponudimo kompletan kod za ovaj efekat: Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Curabitur blandit tempus porttitor. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Prelazak na kreiranje kolona pomoću CSS-a, po našem mišljenju, daje nam mnoge prednosti – više ne moramo da radimo neke vrste matematičkih proračuna, da kreiramo plutajuće elemente i ne moramo da trpimo prelamanje sadržaja kada korisnici menjaju veličinu prozora pretraživača. Kod možete pisati i na semantičkiji način, a pošto ovu metodu podržavaju svi moderni pretraživači, možete se prebaciti na nju već danas. Stilizirate li stupce pomoću CSS3 ili još uvijek koristite float i pozicioniranje? Koje metode koristite da zaobiđete probleme sa starijim pretraživačima? Podijelite s nama u komentarima. Vlad Merzhevich Modularna mreža od dvije kolone se često koristi na stranicama, dok u pravilu jedan stupac sadrži glavni materijal (na primjer tekst članka), a drugi linkove na dijelove stranice i druge informacije. Za kreiranje takvog rasporeda tablice su prilično zgodne - svaka ćelija djeluje kao zasebna kolona, što olakšava podešavanje različitih parametara prikaza dokumenta. Za početak, razmotrimo najjednostavniju opciju, kada je širina lijevog stupca tvrdo kodirana u pikselima, a širina desnog stupca varira ovisno o veličini prozora pretraživača. Da biste to učinili, trebate postaviti ukupnu širinu cijele tablice u procentima kroz atribut širine oznake Stubovi iste visine
CSS dio
Zaključak
Stubovi jednake visine koristeći pozicioniranje
Opis primjera
Kolone iste visine sa slikom u pozadini
Opis primjera
Kolone jednake visine koristeći margine i padding
Opis primjera
Parametri
* širina kolone: širina pojedinačne kolone. Budite spremni na činjenicu da ponekad pretraživači sami mijenjaju ovu vrijednost.
* kolona-razmak: širina žlijeba između stupova.
* širina pravila kolone: Ovo je kao ivice vaših kolona, i ovdje morate odrediti širinu ivice.
* stil pravila kolone: također vrsta ivice ako trebate postaviti stil.
* kolona-pravilo-boja: Ovaj parametar se koristi za određivanje boje.
* raspon stupaca: Ova vrijednost govori pretraživaču koliko kolona želite spojiti - dobro je koristiti za zaglavlja i radi kao colspan i rowspan na tabelama.
.cols3 (
broj kolona: 3;
column-gap: 20px;
}
Ako također želite primijeniti pravilo na stupce, morat ćete dodati ove parametre:
.cols3 (
broj kolona: 3;
column-gap: 20px;
column-rule-width: 1px;
stil pravila kolone: čvrst;
kolona-pravilo-boja: # 000;
}
Kao i kod dobro poznatog parametra granice, možete primijeniti boju, stil i širinu na sljedeći način:
broj kolona: 3;
column-gap: 20px;
kolona-pravilo: 1px solid # 000;
}
Ako imate naslov i želite da se taj naslov proteže po cijeloj širini svih kolona, tada morate dodati sljedeći red koda:
.cols3 h1 (
raspon stupaca: sve;
}
Ovu tehniku možete primijeniti na gotovo svaki HTML kod, od jednog pasusa do više divova. Pogledajmo demo:
Integer posuere erat a ante
Završetak
Širina kolone
