Kako širiti tekst sa strane stupaca? Što se može učiniti automatski? Sigurno su mnogi od vas, koji ste se prije bavili razvojem weba, zaglavili s takvim zadacima - i često su nailazili na presavijena rješenja koja zahtijevaju lukave stilove ili gužvu u dodatnim bibliotekama u JavaScriptu (div. na primjer, dodatak Columnizer za jQuery).

Rich-column layout za sadržaj (ne odvajajte se od starog bogatog rasporeda kolona sa strane, jer je bliži problemu rasporeda blokova na mreži) odavno se probio u svijetu web standarda i, nareshti, ne samo da sam dostigao status preporuke za više kandidata u obliku -column CSS3 modula Layout , već sam pokušao postići široku podršku u preglednicima: ovdje s prefiksima (-moz- ili -webkit-) i ovdje u trenutnom (Opera 11.1 +) i planirane verzije (IE10+), štoviše, jednom bez prefiksa.

Poštovanje
U padajućem izborniku Internet Explorer 10 to automatski znači da je CSS3 wiki s više stupaca moguć kada se Metro stil proširi za dodatke za Windows 8 s HTML/CSS/JS oznakama.

U sklopu članka, ne mijenjam prefikse preglednika kako bih zbunio kod, ali ako ga stvarno promijenite, ne zaboravite dodati prefikse za Firefox, Safari i Chrome.

Odmah ću spomenuti dva važna detalja.
Prvo, u većini slučajeva, u prisutnosti bogatog izgleda stupaca za tekst, možete vidjeti kako se razvija sadržaj stranice po cijenu progresivnog poboljšanja, u okviru tako kratkog popisa modernih stranica , treba uzeti više lepinja:

Na drugi način, bogat stupac dobrote može se kombinirati s mogućnostima medijskih upita (i idejama čudnog dizajna), na primjer, s različitim veličinama zaslona, ​​možete oblikovati tekst u različit broj stupaca:

A ostalo, ono što želim učiniti u uvodu, da ne zamuckam daleko i da mirne savjesti pređem na tehničke detalje: uz široku paletu bogatog izgleda kolona, ​​tekst treba zapamtiti, pa roztashuvannya prijenos na pogrešan red čitanja (za pogrešan red čitanja) . Za to je važno, za prevođenje pogleda s jednog stupca na drugi, bilo je potrebno raditi barem neke dodatne, posebno okomite scrolls:

U tom smislu, vodoravna priroda stupaca vjerojatnije će ići s horizontalnim pomicanjem (kao što jest, najbolje je pobijediti u bogatim dodacima za Win8 - na primjer, dobro je vidjeti iza dodatka USA Today ):

Zagalom, kolumne su divne, ali ne zaboravite na prozirnost koristuvača. A sad bej!

zvučnike

Otzhe, možemo tekst (sadržaj), koji želimo smjestiti u papalinu stupaca. Zašto početi?

Da biste takav element pretvorili u bogat stupac, trebate umetnuti jedan od autoriteta kroz CSS stilove: širina stupca ili kolona-broj u značenju, vídmínne víd auto. Na primjer,
da podijelite tekst u dva stupca, dovoljno da ga podijelite ovako:

Članak (broj stupaca: 2; )

U suprotnom, srušite preglednik:

Alternativna snaga širina stupca- omogućuje vam postavljanje optimalne širine stupaca:

Članak (širina stupca: 150px;)

U tom slučaju, sam preglednik dijeli sadržaj na potreban broj stupaca, kako bi ispunio vanjski spremnik, prilagođavajući širinu stupaca. Važan trenutak za onoga koji stvarna širina se može podesiti prema navedenom Imam manju stranu: za malo više, sir ženka može imati širinu od 150px - i, očito, manja je, manja je stvarna širina stupca.

Ovo ponašanje određeno je specifičnostima i omogućuje (automatski) postizanje veće fleksibilnosti pri proširenju prilagodljivog izgleda:

Na primjer, ako imate kontejner širine 100px i postavili ste stupce širine 45px, tada je preglednik važan, budući da su u blizini samo dva stupca, a kako biste uštedjeli sav prostor povećajte veličinu kože na 50px. (Ovdje je zaštićen i ulaz između kolona, ​​o čemu će biti rečeno u ofenzivnom odjelu.)

U pjevačkom smislu, kao alternativu zahtjevu za dodatnim medijskim upitima možete uzeti u obzir različit broj stupaca koji upadaju u veličinu prozora i s automatskim mijenjanjem širine stupaca:

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

Odjednom govorim o alternativi – i zašto.

count vs. širina

Koliko mogu razumjeti iz opisa, specifikacija daje dva načina za postavljanje broja i širine stupaca (prije govora, svi stupci su isti!):

• kolona-broj omogućuje vam da odredite broj stupaca, kako trebate podijeliti sadržaj, s kojom će širinom stupaca preglednik postaviti veličinu dostupnog prostora.
• širina stupca unesite s pogrešne strane: naznačite, koje su otprilike greške stupaca, protely lišite računa o njihovom broju po prosudbi preglednika.

S više vipadkív dobit ćete ili jedno ili drugo, djelujući u brojevima, ili dozhins. Radi jednostavnosti, rekord je tako kratka snaga stupaca, koji reagira na format podataka:

Stupci: 12em; /* širina stupca: 12em; broj stupaca: auto; */ stupaca: 2; /* širina stupca: auto; broj stupaca: 2; */stupci: auto; /* širina stupca: auto; broj stupaca: auto; */ stupci: auto 12em; /* širina stupca: 12em; broj stupaca: auto; */stupci: 2 auto; /* širina stupca: auto; broj stupaca: 2; */

Kako ćete odrediti broj stupaca i optimalnu širinu? Vídpovídno do specifíkatsíí̈, yomu vipadku kolona-broj postavlja maksimalni broj stupaca:

Članak ( stupci: 150px 3; /* širina stupca: 150px; broj stupaca: 3; */)

Zapravo, jureći razvoj web standarda, uključujući i one iz mojih članaka o CSS3 (na primjer, čudesan), siguran sam da nisam ništa manje inspiriran da se čudim mogućnosti da se pojave pred web trgovcima. Prilagodljivi, fleksibilni i laki alati za upravljanje smještajem sadržaja učinili su ga bližim i dostupnijim. A otvaranje preklopnih naloga je jednostavnije.

Interaktivna

Možete se poigrati s CSS3 robotom s više stupaca na ietestdrive.com:

Probaj, eksperimentiraj. Obavijestite trgovce preglednicima o greškama. I ne zaboravite razmišljati o tome kako podržati stare (i moderne, ali još uvijek neispunjene standardom) preglednike – na primjer, možete podesiti dodatak za jQuery Columnizer. Imajte na umu prilagodljivost i malih i velikih zaslona.

Trepachov D.P. 2012-2020

Naučimo: imam godišnji odmor do 6. dana, na odmoru sam u mogućnosti to učiniti,
ponekad mogu nestati na par dana

Izgled JavaScript PHP NodeJs Vue React Laravel WordPress AJAX raščlanjivanje Glavni priručnik Handyman HTML priručnik CSS Handyman OOP i MVC

Broj stupaca snage

Sintaksa

Selektor (broj stupaca: broj | auto;)

Vrijednost

Ključna vrijednost: auto.

Guzica

Na čijoj se aplikaciji nalazi tekst rozíb'êtsya 3 stupca(Očigledno, u preglednicima koji podržavaju sadržaj s bogatim stupcima, ostatak će biti samo običan tekst u jednom stupcu):

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

">

Guzica. auto vrijednost

U ovom primjeru navedena je širina širine stupca 150px, i njihova kílkíst kolona-broj stajati na točki auto- preglednik sam određuje broj stupaca i razmak između njih:

#elem (broj stupaca: auto; širina stupca: 150px; poravnanje teksta: opravdati;)

">

The CSS modul izgleda s više stupaca proširuje način blok rasporeda kako bi se omogućilo jednostavno definiranje više stupaca teksta. Ljudi mogu imati problema s čitanjem teksta, kao da je redak star; 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, kako bi dosegli maksimalnu razinu sjajnih obrazovki, vlasnici krive majke rubnog stupca i teksta, skrivenog u sredini, samo kao što to rade novine.

Nije iznenađujuće, nemoguće je razbiti CSS i HTML bez fokusiranja prijeloma stupaca na fiksne pozicije, ili ozbiljnog ograničavanja dopuštenih oznaka u tekstu, ili upotrebe herojskog skriptiranja. Postoji hack za stvaranje novih CSS ovlasti za proširenje tradicionalnog načina blokiranja.

Korištenje stupaca

Broj i širina stupaca

Dva CSS svojstva kontroliraju hoće li se i koliko stupaca pojaviti: column-count i column-width.

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

Primjer 1

HTML

css

#col (broj stupaca: 2;)

proizlaziti

Prikazat će se u dva stupca (kao i preglednik usklađen s više stupaca):

Svojstvo column-width postavlja minimalnu željenu širinu stupca. Ako broj stupaca nije postavljen, preglednik će automatski napraviti onoliko stupaca koliko stane u dostupnu širinu.

Primjer 2

HTML

css

#wid (širina stupca: 100px; )

proizlaziti

U bloku s više stupaca, umjesto automatskog topljenja jednog stupca u sljedećem prema potrebi. Sve HTML, CSS i DOM funkcije podržane su u arhivama, poput uređivanja i ispisa.

stenografija stupaca

Više vremena i web dizajner će podesiti jedno od dva CSS svojstva: column-count ili column-width. Kao vrijednost za ove ovlasti, kako se ne bi preklapala, korisna je za odabir kratkih hlača i stupaca. Npr.

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

Primjer 3

HTML

css

#col_short (stupci: 12em; )

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

Primjer 4

HTML

css

#stupci_4 (stupci: 4;)

proizlaziti

Dvije CSS deklaracije širina stupca: 8em i broj stupaca: 12 mogu se zamijeniti stupcima: 12 8em .

Primjer 5

HTML

css

#stupci_12 (stupci: 12 8em;)

proizlaziti

Balansiranje visine

CSS3 specifikacija stupaca zahtijeva da visine stupaca moraju biti uravnotežene: to jest, preglednik automatski postavlja maksimalnu visinu stupca tako da su visine sadržaja u svakom stupcu približno jednake. Firefox to radi.

Međutim, u nekim slučajevima možemo i eksplicitno postaviti maksimalnu razinu stupca, a smrad će se pojaviti umjesto pucanja na prvi stupac i stvoriti koliko god je potrebno stupce, moguće prelijevanje udesno. Stoga, poput pisanja, umetanja, prilagođavanja CSS-a, možete postaviti maksimalni ili maksimalni broj ikona na bloku s više stupaca, bez obzira da li je stupac pritisnut na razmak, što nije slučaj, jer nije povezan s novim stupac. Ova metoda je učinkovitija i za pljačku.

Praznine u stupcima

Postoji razmak između stupaca. Preporučena zadana vrijednost je 1em. Ovo proširenje se može promijeniti za dodatno svojstvo razmaka stupaca u blok s više stupaca:

Primjer 6

HTML

css

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

proizlaziti

graciozna degradacija

svojstva stupca jednostavno će biti zanemarena od strane preglednika koji ne podržavaju stupce. Stoga je relativno lako stvoriti izgled koji će se prikazivati ​​u jednom stupcu u tim preglednicima i koristiti više stupaca u podržanim preglednicima.

Zaključak

CSS3 stupci su primitivni izgled koji će pomoći web programerima da na najbolji način iskoriste nekretninu zaslona. Maštoviti programeri mogu pronaći mnoge namjene za njih, posebno značajku automatskog balansiranja visine.

(optimalna širina stupca) i broj stupaca (optimalni broj stupaca).

Podrška od strane preglednika

CSS sintaksa:

stupci: "automatski | širina stupca broj stupaca | početni | naslijediti"; Ako je vrijednost navedena kao cijeli broj, ona će se povećati do vrijednosti snage broja stupaca, ako je navedena u CSS jedinicama podjele (px, mm, pt, tanka), zatim do širine stupca. Dozvoljeno je reći kao jedno, dakle dva značenja u jednom bezglasnom. stupci: "auto" stupci: "automatski" /* širina stupca: auto; broj stupaca: automatski */

JavaScript sintaksa:

Object.style.columns = "automatski"

Vrijednost Yakosti

Vrijednost	Opis
auto	Označava da su vrijednosti snage širine stupca i broja stupaca postavljene na automatski (širinu i broj stupca automatski postavlja preglednik - što znači da element nije bogat stupcima). Automatsko zaključavanje vrijednosti.
širina stupca	Postavlja optimalnu širinu stupca. Širina stupca može biti šira zbog prisutnosti slobodnog prostora, inače je vrijednost veće moguće širine stupca već postavljena. Vrijednosti širine navedene su u CSS jedinicama (px, mm, pt ili tako). Značenje može biti prilično pozitivno. Molim vaše poštovanje da nijedno od značenja dodijeljenih vídsotkah nije dopušteno. Promovirana vrijednost je auto .
kolona-broj	Određuje optimalan broj stupaca. Vrijednost je navedena kao cijeli broj. Promovirana vrijednost je auto .
	Vraćanje snage značaja za brave.
	To pokazuje da značenje opada pred elementom Batkiv.

CSS verzija

CSS3

odbiti

Ni.

Animacija

Tako.

Butt vikoristannya