Kako postaviti tekst na stranu brojnih kolona? Da li je moguće to uraditi automatski? Naravno, mnogi od vas koji rade ili ste se ranije bavili razvojem weba susreli su se s takvim problemima - i često su nailazili na složena rješenja koja zahtijevaju lukave stilove ili gomilanje dodatnih biblioteka u JavaScriptu (na primjer, dodatak Columnizer n za jQuery).

Raspored sadržaja sa bogatim kolonama (ne mešati sa originalnim izgledom stranice sa bogatim kolonama, koji je bliži problemu širenja blokova po sajtu) odavno se probio u svetu web standarda i, kažu, , ne samo da je dostigao status Preporuke kandidata za izgled CSS3 modula sa više kolona, ​​već je i odbio da pruži široku podršku u pretraživačima: ovde sa prefiksima (-moz- ili -webkit-) i ovde u aktuelnom (Opera 11.1 +) i planirane verzije (IE10+), i bez prefiksa.

Poštovanje
Uz Internet Explorer 10, to automatski znači da možete koristiti CSS3 više kolona kada razvijate Metro stilske ekstenzije za Windows 8 sa HTML/CSS/JS.

Kao dio članka, ne koristim prefikse pretraživača da zbunim kod, ali u slučaju pravog wikija ne zaboravite dodati podršku za prefikse za Firefox, Safari i Chrome.

Odmah ću napomenuti dva važna detalja.
Prije svega, u većini slučajeva, stagnacija bogatog kolonastog izgleda teksta može se posmatrati kao razvoj sadržaja na sajtu na nivou progresivnog poboljšanja, u okviru kojeg neki od aktuelnih sajtova dobijaju još dobrota:

Na drugi način, bogat kolonasti prikaz dobro je prikladan za mogućnosti Media Queries (i ideje kreativnog dizajna), na primjer, s različitim veličinama ekrana, možete formatirati tekst u više kolona:

I ostaje da istaknem na početku, da ne bi oklevao dalje i mirne savjesti, pređimo na tehničke detalje: kod rasporeda u više kolona, ​​tekst zahtijeva pamćenje, tako da se može retuširano prije Ispravan redoslijed čitanja je u redu (za evropske jezike, s desna na desno) . Stoga je važno da je za prebacivanje pogleda s jednog stupca na drugi potrebno izvršiti najmanje dodatnih koraka, posebno kod vertikalnih pomicanja:

U tom smislu, horizontalna priroda kolona je bolje kombinovana s horizontalnim pomicanjem (kao što se vidi u mnogim dodacima za Win8 - na primjer, to je jasno vidljivo u dodatku USA Today):

Inače, zvučnici su fantastični, ali ne zaboravite na praktičnost korisnica. I sada ga imate!

Kolone

Dakle, imamo tekst (sadržaj) koji želimo da postavimo u određeni broj kolona. Početi sa čime?

Da biste transformirali takav element u element s više stupaca, trebate postaviti jednu od kontrola kroz stilove u CSS-u: širina kolone ili drugo kolona-broj po vrijednosti, spolja auto. Na primjer,
Da biste podijelili tekst u dvije kolone, uradite to ovako:

Članak (broj kolona: 2; )

Sve ostalo, otvorite pretraživač:

Alternativna snaga širina kolone- omogućava vam da postavite optimalnu širinu kolone:

Članak (širina kolone: ​​150px;)

U ovom slučaju, sam pretraživač deli sadržaj na potreban broj kolona da popuni postojeći kontejner, prilagođavajući se navedenoj širini kolone. Važan trenutak za onoga ko stvarna širina može varirati ovisno o specificiranoj širini na većoj ili manjoj strani: na maloj strani, veća siva boja ima širinu od 150px - i, očigledno, manja je stvarna širina kolone.

Ovo ponašanje je definirano specifikacijom i omogućava (automatski) postizanje veće fleksibilnosti pri razvoju prilagodljivog izgleda:

Na primjer, ako imate kontejner širine 100px i zadali ste stupce širine 45px, tada je pretraživaču važno da ima samo dvije kolone, a da popunite cijeli prostor, povećajte veličinu skina na 50px . (Ovdje je također pokriven pristup između kolona, ​​što će biti objašnjeno u sljedećem odjeljku.)

U pevačkom smislu ovo se može posmatrati kao alternativa naručivanju pomoći za medijske upite sa različitim brojem kolona prema veličini prozora i sa automatskom podelom širine kolona:

@media (min-width:400px) (članak (broj kolona: 2; ) ) @media (min-width:600px) (članak (broj kolona: 3; )) ...

Odjednom govorim o alternativi - i zato.

count vs. širina

Kao što je već razumljivo iz opisa, specifikacija pruža dva načina za postavljanje broja i širine kolona (prije govora, sve kolone su iste!):

• kolona-broj Omogućava vam da odredite broj kolona koji su vam potrebni za odvajanje sadržaja, pri čemu širinu kolona određuje pretraživač kako bi se izbalansirao raspoloživi prostor.
• širina kolone idi sa zadnje strane: označava koje su kolone približno odgovorne, ostavljajući izgled njihovog sadržaja na diskreciju pretraživača.

U većini slučajeva ćete biti pobjednici u jednom ili drugom, na osnovu brojeva ili dovžina. Da bismo pojednostavili snimanje, napajanje je tako kratko kolone, koji odgovara formatu podataka:

Kolone: ​​12em; /* širina kolone: ​​12em; kolona-broj: auto; */ stupaca: 2; /* širina kolone: ​​auto; broj kolona: 2; */ kolone: ​​auto; /* širina kolone: ​​auto; kolona-broj: auto; */ kolone: ​​auto 12em; /* širina kolone: ​​12em; kolona-broj: auto; */ kolone: ​​2 auto; /* širina kolone: ​​auto; broj kolona: 2; */

Šta se dešava ako navedete broj kolona i optimalnu širinu? U zavisnosti od specifikacije u kom slučaju kolona-broj znači maksimalan broj kolona:

Članak ( kolone: ​​150px 3; /* širina kolone: ​​150px; broj kolona: 3; */ )

U stvari, kako nastavljamo da razvijamo web standarde, uključujući neke od mojih članaka o CSS3 (na primjer, na primjer), siguran sam da nećete biti ništa manje iznenađeni izvodljivošću koja se otkriva web programerima. Prilagodljive, fleksibilne i moćne funkcije za upravljanje sadržajem smještenim u podacima su bliže i pristupačnije. A vezivanje preklopnih naloga postaje sve jednostavnije.

Interaktivno

Možete se poigrati sa CSS3 Multi-column na ietestdrive.com:

Probajte, eksperimentirajte. Obavijestite programere pretraživača o greškama. I ne zaboravite da razmislite o tome šta možete da uradite sa starijim (i trenutnim, ali još uvek nedoraslim) pretraživačima - na primer, možete koristiti dodatak za jQuery Columnizer. Zapamtite prilagodljivost i malih i velikih ekrana.

Trepachov D.P. 2012-2020 r.

Naučite: Imam odmor do 6., na odmoru koliko god je to moguće,
Ponekad mogu nestati na nekoliko dana

Layout JavaScript PHP NodeJs Vue React Laravel WordPress AJAX Parsing Glavni područnik Dovidnik HTML Dovdruchnik CSS Područnik OOP i MVC Video tutorijali Glavni područnik Dovidnik Video tutorijali Glavni područnik Glavni područnik Glavni područnik Glavni pomoćnik administratora asistenta

Broj stupaca snage

Sintaksa

Selektor (broj kolona: broj | auto; )

Značaj

Značaj za pranje: auto.

Butt

U kojoj se aplikaciji pojavljuje tekst? 3 kolone(Naravno, u pretraživačima koji podstiču bogatu kolumnarnost, rješenje će biti samo običan tekst u jednoj koloni):

#elem (broj kolona: 3; poravnanje teksta: opravdati; )

">

Butt. Što znači auto

U ovoj aplikaciji je naznačena širina kolone širine kolone 150px i njihovu količinu kolona-broj stati sa značajnim auto- pretraživač sam bira potreban broj kolona i razmak između njih:

#elem (broj kolona: auto; širina kolone: ​​150px; poravnanje teksta: opravdati; )

">

The CSS modul rasporeda sa više kolona proširuje blok raspored rasporeda kako bi se omogućila laka definicija više kolona teksta. Ljudi kažu da je teško čitati tekst, jer su redovi dugački; ako očima treba predugo da se pomaknu s kraja jedne linije na početak sljedeće, gube pojam na kojoj su liniji bile. Tamo, da bi se postigla maksimalna vikoristannya veliki obrazovky, Vlasniki krive majke ivice širine kolone sa tekstom, raširenim u sredini, baš kao što to rade novine.

Nije iznenađujuće, nemoguće je kreirati CSS i HTML bez fokusiranja, prekida kolona na fiksnim pozicijama, ili ozbiljnog ograničavanja oznake dozvoljene u tekstu, ili upotrebe herojskog skriptiranja. Ova razmjena se koristi za kreiranje novih CSS kontrola za proširenje tradicionalnog načina blokiranja.

Korištenje kolona

Broj i širina kolona

Dva CSS svojstva kontrolišu hoće li se i koliko kolona pojaviti: kolona-broj i širina kolone.

svojstvo broja kolona postavlja broj kolona na određeni broj. npr.

Primjer 1

HTML

CSS

#col (broj kolona: 2; )

Rezultat

Pojavit će se u dvije kolone zajedno (ako koristite preglednik usklađen sa više kolona):

Svojstvo column-width postavlja minimalnu željenu širinu kolone. Ako broj kolona nije postavljen, pretraživač će automatski napraviti onoliko kolona koliko stane u dostupnu širinu.

Primjer 2

HTML

CSS

#wid (širina kolone: ​​100px; )

Rezultat

U bloku sa više kolona, ​​umjesto da se automatski topi iz jedne kolone u drugu po potrebi. Sve HTML, CSS i DOM funkcionalnosti su podržane funkcijama kao što su uređivanje i štampanje.

stenografija kolona

Većinu vremena i Web dizajner će odabrati jedno od dva CSS svojstva: kolona-broj ili kolona-širina. Kako je to važno za ove autoritete, da se ne preklapaju, važno je za rast šortsa i kolona. Npr.

Širina stupca CSS deklaracije: 12em može se zamijeniti stupcima: 12em .

Primjer 3

HTML

CSS

#col_short (kolone: ​​12em; )

Broj stupaca CSS deklaracije: 4 može se zamijeniti stupcima: 4 .

Primjer 4

HTML

CSS

#columns_4 ( stupci: 4; )

Rezultat

Dve CSS deklaracije kolona-width: 8em i column-count: 12 mogu se zamijeniti stupcima: 12 8em .

Primjer 5

HTML

CSS

#columns_12 ( stupaca: 12 8em; )

Rezultat

Balansiranje visine

CSS3 specifikacija kolone zahteva da visine kolona moraju biti izbalansirane: to jest, pretraživač automatski postavlja maksimalnu visinu kolone tako da su visine sadržaja u svakoj koloni približno jednake. Firefox to radi.

Međutim, u nekim slučajevima moguće je i eksplicitno postaviti maksimalan nivo kolona, ​​i umjesto pucanja na prvu kolonu, kreirati onoliko kolona koliko je potrebno, eventualno prelivajući udesno. Stoga, prilikom pisanja, instaliranja, prilagođavanja CSS-a može kreirati maksimalan ili maksimalan broj ikona na bloku sa više kolona, ​​bilo da je bilo koja kolona pritisnuta na veću, ono što nije u redu je što nije povezana sa novom kolonom. Ova metoda je takođe veoma efikasna za zaradu.

Column Gaps

Postoji razmak između kolona. Preporučena zadana vrijednost je 1em. Ova veličina se može promijeniti korištenjem svojstva column-gap u blok sa više stupaca:

Primjer 6

HTML

CSS

#column_gap (broj stupaca: 5; razmak stupaca: 2em; )

Rezultat

Graciozna degradacija

svojstva kolone će jednostavno biti zanemarena od strane pretraživača koji ne podržavaju kolone. Stoga je relativno lako napraviti izgled koji će se prikazivati ​​u jednoj koloni u tim pretraživačima i koristiti više kolona u pretraživačima koji podržavaju.

Zaključak

CSS3 kolone su primitiv rasporeda koji će pomoći Web programerima da na najbolji način iskoriste nekretninu ekrana. Maštoviti programeri mogu pronaći mnogo načina za njih, posebno sa funkcijom automatskog balansiranja visine.

(optimalna širina kolone) i broj kolona (optimalan broj kolona).

Podrška za pretraživač

CSS sintaksa:

kolone: "auto | kolona-širina kolona-broj | početni | naslijediti"; Ako je vrijednost navedena kao cijeli broj, ona se prevodi u vrijednost snage broja stupaca, koja je navedena u CSS jedinicama vrijednosti (px, mm, pt, itd.), a zatim u širinu stupca. Dozvoljeno je naznačiti jedno ili dva značenja u jednoj rečenici. kolone: ​​"auto" kolone: ​​"auto automatski" /* širina kolone: ​​auto; broj kolona: auto */

JavaScript sintaksa:

Object.style.columns = "automatski"

Značenje jakosti

Značaj	Opis
auto	Označava da su kontrole širine kolone i broja kolona postavljene na automatski (širina kolona i njihov broj se automatski izračunavaju od strane pretraživača - što znači da element nije sa više kolona). Značaj za zamovchuvannyam auto auto.
širina kolone	Postavlja optimalnu širinu kolone. Širina kolone može biti šira ako se želi ili se može specificirati veća vrijednost od moguće širine stupca. Vrijednosti širine su navedene u CSS jedinicama (px, mm, pt, itd.). Značenje je izuzetno pozitivno. Želio bih da izrazim vaše poštovanje što nijedna od vrednosti dodeljenih stotinama nije dozvoljena. Značaj za auto Promovčany.
kolona-broj	Postavlja optimalan broj zvučnika. Vrijednost je prikazana kao cijeli broj. Značaj za auto Promovčany.
	Utvrđuje važnost moći za odluke.
	To pokazuje da postoji značajan pad Očevog elementa.

CSS verzija

CSS3

odbiti

br.

Animacija

Dakle.

Vikoristanny butt