Tekst u više kolona. Gumeni trostubni raspored

Na osnovu ovih zahtjeva, jednom sam našao vrlo dobar način za sebe, malo ga modificirao i dodao mu nekoliko parametara kako bih postigao fleksibilnost u izgledu responzivnih stranica. Koristim ga već duže vrijeme, a danas ću ga podijeliti sa vama, možda nekome bude od koristi. I zato počnimo s kodiranjem stranice sa tri kolone!

Prije svega, moramo rastaviti strukturu kako će sve biti na našoj stranici. Prvo ću pokazati sam kod, a onda ćemo shvatiti šta i kako. Ispod je primjer, također pokušajte promijeniti veličinu prozora da vidite kako se struktura ponaša.

HTML kod same strukture:

Kod pokazuje da su zaglavlje i podnožje nezavisni. Odnosno, oni nisu zatvoreni ni u jednom kontejneru, odnosno, ako vaša stranica ima određenu širinu, onda zaglavlje i podnožje moraju biti odvojeno centrirani kako ne bi klizali. Gledajući unaprijed, u mom primjeru, sadržaj će biti širok 1170 piksela, i stoga ću postaviti istu širinu u stilovima podnožja i zaglavlja i poravnati ga sa središtem.

Sam sadržaj, zajedno sa bočnim trakama, zatvoren je u zajednički kontejner, koji ima ID - omotač... Nadalje, sadržaj koji je centriran i ima ID - sadržaja, nalazi se u još jednom kontejneru sa ID-om - main... Ovo je imperativ za prilagodljivost u budućnosti.

Nakon sadržaja, pored njega su dvije bočne trake - lijeva sa ID-om - lijeva strana i desno sa id - desna strana.

Da bi se sve ispravno prikazalo, potrebno je da dodate CSS stilove:

Zaglavlje (max-width: 1170px; margina: 0 auto;) podnožje (max-width: 1170px; margin: 10px auto 0; clear: oboje;) #wrapper (max-width: 1170px; margin: 0 auto; pozicija: relativna ; visina: 100%;) #main (float: lijevo; širina: 100%;) #left_side (width: 240px; margin-left: -100%; float: left;) #content (margin: 0 440px 0 250px; ) #right_side (float: lijevo; širina: 430px; margin-left: -430px;)

Kao što sam rekao, podrum i šešir su odvojeni i imaju svoje centriranje. Glavna širina cijele stranice bit će 1170 piksela, ali je naravno možete mijenjati ovisno o vašim potrebama.

Takođe, bočne trake imaju fiksnu širinu, a kada se smanji veličina prozora pretraživača, smanjuje se srednja kolona - sadržaj. Ako promijenite širinu bočnih traka, promijenite svojstvo margina sadržaj da postavite ispravan padding.

Važna tačka je imanje u podrumu - jasno: oba;... Ako ga uklonite, onda će podrum skočiti do kape, a ovo nam uopće ne treba. Ako trebate napraviti uvlačenje između sadržaja i podnožja, možete dodati još jedan div-blok između njih i dodijeliti mu svojstvo jasno: oba;, i uklonite ga iz podruma i postavite uvlačenje. Na primjer:

//Block

Sada dodajmo CSS stilove za ispravan prikaz bočnih traka i sadržaja na mobilnim uređajima, odnosno dodajmo brzu reakciju našoj versti.

Odredio sam parametre za širinu prvo - 950px, zatim - 500px.Ako promijenite širinu sadržaja ili cijelog kontejnera, možete promijeniti vrijednosti na svoje, ne zaboravite na ovo i izračunajte kako treba da kasnije neće biti problema.

U principu, ovdje je sve jednostavno, a glavni volumen zauzima svojstvo tranzicije. Ovo se radi radi glatke animacije prilikom promjene veličine prozora. Ako vam ne treba, možete ga potpuno ukloniti iz svih ID-ova.

Kada shvatite kako to funkcionira, lako možete kreirati stranice sa tri kolone koje imaju dvije bočne trake sa sadržajem u sredini.

To je sve, hvala na pažnji. 🙂

Tekst sa više kolona se dugo koristio u izdavačkoj industriji za izgled novina, časopisa i knjiga. Čovjeku je ugodnije čitati tekst određene širine; kolone omogućavaju podjelu velikog teksta na stupce određene veličine. Na web stranicama to nema smisla uvijek činiti zbog ograničene visine prozora pretraživača. Čitalac će prvo morati da skroluje jednu kolonu do kraja, a zatim da se vrati na početak sledeće kolone, što je prilično nezgodno. Međutim, za neke tekstove ima smisla koristiti tekst sa više kolona zbog efektivne upotrebe slobodnog prostora u širini.

CSS3 nudi četiri svojstva odjednom za kreiranje i upravljanje kolonama: kolona-broj, kolona-razmak, širina kolone i pravilo kolone. Radi jasnoće, vrijednosti nekih svojstava prikazane su na Sl. jedan.

Rice. 1. Svojstva stila za stupce

• column-count - postavlja optimalni broj kolona.
• column-gap - udaljenost između stupova.
• column-width - optimalna širina kolone.
• column-rule je linija razdvajanja između kolona.

Treba razjasniti šta su "optimalni broj" i "optimalna širina". Svojstvo column-count ne postavlja tačan broj kolona, ​​već željeni. Pregledač će pokušati da razbije tekst na tačno toliko kolona, ​​ali kada se veličina prozora smanji, smanjit će broj kolona kako bi održao udobno čitanje. Slična je situacija i sa širinom. Svojstvo column-width specificira minimalnu širinu kolone, a pretraživač može zanemariti ovu vrijednost ako prozor nije dovoljno velik da primi navedenu širinu kolone.

Chrome i Safari razumiju ova svojstva samo sa -webkit prefiksom, a Firefox samo sa -moz prefiksom. Kombinujemo svojstva za različite pretraživače i dobijamo kod koji kreira tekst sa tri kolone (primer 1).

Primjer 1. Tri kolone

HTML5 CSS 3 IE 9 IE 10 Cr Op Sa Fx

Rezultat ovog primjera u pregledniku Chrome prikazan je na Sl. 2. Umjesto tri kolone, vidimo dvije zbog male širine prozora pretraživača. S povećanjem veličine prozora, broj stupaca će porasti na navedeni; s daljnjim smanjenjem širine prozora, naprotiv, broj stupaca će se smanjiti na jedan.

Rice. 2. Tekst u više kolona

Da biste skratili skup primijenjenih svojstava stila, možete koristiti univerzalno svojstvo stupaca, ono istovremeno postavlja širinu stupaca i njihov broj (primjer 2).

Primjer 2. Korištenje kolona

Kolona (-webkit-columns: 200px 3; -moz-columns: 200px 3; stupci: 200px 3; -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; pravilo stupca: 1px solid #ccc; -moz-column-rule: 1px solid #ccc; column-rule: 1px solid #ccc;)

Opet, neki pretraživači zahtevaju sopstvene prefikse da bi radili. Udaljenost između stupaca i parametara razdjelne linije, ako je potrebno, moraju se podesiti dodatnim svojstvima. Ako kolona-razmak i kolona-pravilo nisu specificirani, linija između stupaca se ne prikazuje, ali je neka minimalna udaljenost između stupaca ipak sačuvana.

1. širina svih ćelija je navedena u procentima;

2. kombinacija postotaka i piksela, kada je širina nekih ćelija postavljena u procentima, a drugih - u pikselima.

V U prvom slučaju prvo se postavlja širina cijele tabele u procentima, a zatim širina pojedinačnih ćelija (primjer 4.22). Štoviše, ukupna širina ćelija trebala bi biti 100%, unatoč činjenici da veličina tablice može biti drugačija. Poenta je da se širina tabele izračunava u odnosu na raspoloživi prostor. web stranicu, a veličina ćelije se postavlja u odnosu na tablicu kao cjelinu.

Primjer 4.22. Širina kolone u procentima XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6