Cum să răspândești textul pe marginea coloanelor? Ce se poate face automat? Cu siguranță, mulți dintre voi, care ați mai fost implicați în dezvoltarea web, s-au blocat cu astfel de sarcini - și de multe ori au întâlnit soluții pliate care necesită stiluri viclene sau aglomerare biblioteci suplimentare în JavaScript (div., de exemplu, pluginul Columnizer pentru jQuery).

Aspect de coloană bogat pentru conținut (nu vă îndepărtați de vechiul aspect de coloană bogat al lateral, deoarece este mai aproape de problema aranjării blocurilor pe grilă) și-a făcut de mult timp în lumea standardelor web și, nareshti, nu doar am ajuns la statutul de Recomandare Multi Candidat sub forma unui modul -coloană CSS3 Layout , dar am încercat să obțin un suport larg în browsere: aici cu prefixe (-moz- sau -webkit-) și aici în curent (Opera 11.1). +) și versiunile planificate (IE10+), în plus, o dată fără prefixe.

Respect
În meniul derulant Internet Explorer 10, înseamnă automat că wiki-ul cu mai multe coloane CSS3 este posibil atunci când extindeți stilul Metro pentru suplimentele Windows 8 cu etichete HTML/CSS/JS.

Ca parte a articolului, nu schimb prefixele browserului pentru a încurca codul, dar dacă îl schimbați cu adevărat, nu uitați să adăugați prefixe pentru Firefox, Safari și Chrome.

Voi aminti imediat două detalii importante.
În primul rând, în majoritatea cazurilor, în structura bogată a coloanei pentru text, puteți vedea cum dezvoltarea conținutului site-ului cu un cost de îmbunătățire progresivă, în cadrul unei liste atât de scurte de site-uri moderne , ar trebui luate mai multe chifle:

Într-un alt mod, o coloană bogată de bine va fi combinată cu posibilitățile de interogări media (și idei de design ciudat), de exemplu, cu dimensiuni diferite de ecran, puteți formata textul la un număr diferit de coloane:

Și restul, ce vreau să fac la intro, ca să nu mă bâlbâi departe și cu conștiința calmă să merg la detaliile tehnice: cu o mare varietate de layout-ul bogat în coloane, textul trebuie amintit, deci roztashuvannya transferarea la ordinea de citire greșită (pentru ordinea de citire greșită) . Prin urmare, este important ca, pentru a traduce o privire dintr-o coloană în alta, a fost necesar să se lucreze cel puțin câteva funcții suplimentare, în special derulări verticale:

În acest sens, este mai probabil ca natura orizontală a coloanelor să meargă împreună cu scroll-ul orizontal (așa cum este, funcționează în suplimente bogate pentru Win8 - de exemplu, este bine să vezi în spatele suplimentului USA Today) :

Zagalom, coloanele sunt minunate, dar nu uitați de transparența coristuvachis. Și acum bey!

difuzoare

Otzhe, putem text (conținut), pe care vrem să-l plasăm într-o serie de coloane. De ce începe?

Pentru a transforma un astfel de element într-unul bogat în coloană, trebuie să inserați una dintre autorități prin stilurile CSS: lățimea coloanei sau număr-coloană la sens, vіdmіnne vіd auto. De exemplu,
pentru a împărți textul în două coloane, suficient pentru a-l împărți astfel:

Articol (număr de coloane: 2; )

În caz contrar, blocați browserul:

Putere alternativă lățimea coloanei- vă permite să setați lățimea optimă a coloanelor:

Articol (lățimea coloanei: 150px; )

În acest caz, browserul însuși împarte conținutul în numărul necesar de coloane, pentru a completa containerul exterior, ajustând lățimea coloanelor. Un moment important pentru cel care lățimea reală poate fi ajustată conform specificațiilor Am o latură mai mică: pentru puțin mai mult, o femeie domnule poate avea o lățime de 150px - și, evident, este mai puțin, mai mică este lățimea reală a coloanei.

Acest comportament este determinat de specific și permite (automat) obținerea unei flexibilități mai mari la extinderea aspectului adaptiv:

De exemplu, dacă aveți un container cu o lățime de 100px și ați setat coloane cu o lățime de 45px, atunci browserul este important, deoarece există doar două coloane în apropiere și, pentru a economisi tot spațiul, măriți dimensiunea piele la 50px. (Aici este protejată și intrarea dintre coloane, despre care se va spune la divizia ofensivă.)

În sensul cântării, puteți lua în considerare ca alternativă la cererea de interogări media suplimentare un număr diferit de coloane rămase în dimensiunea ferestrei și cu redimensionarea automată a lățimii coloanelor:

@media (lățime minimă: 400 px) ( articol ( număr de coloane: 2; ) ) @ media ( lățime minimă: 600 px) ( articol ( număr de coloane: 3; ) ) ...

Deodată vorbesc despre o alternativă – și de ce.

numără vs. lăţime

Din câte pot înțelege din descriere, specificația oferă două moduri de a seta numărul și lățimea coloanelor (înainte de vorbire, toate coloanele sunt la fel!):

• număr-coloană vă permite să specificați numărul de coloane, despre modul în care trebuie să împărțiți conținutul, cu ce lățime a coloanelor browserul va seta dimensiunea spațiului disponibil.
• lățimea coloanei introduceți din partea greșită: indicați, care sunt aproximativ vina coloanei, lipsește în mod protejat contul de suma de bani la judecata browserului.

Cu mai multe vipadkіv, vei câștiga fie unul, fie altul, operând în cifre sau dozhins. Pentru simplitate, înregistrarea este o putere atât de scurtă coloane, care reacționează la formatul de date:

Coloane: 12em; /* lățime-coloană: 12em; coloană-count: auto; **/ coloane: 2; /* lățime-coloană: auto; număr de coloane: 2; */coloane: auto; /* lățime-coloană: auto; coloană-count: auto; */ coloane: auto 12em; /* lățime-coloană: 12em; coloană-count: auto; */coloane: 2 auto; /* lățime-coloană: auto; număr de coloane: 2; */

Cum veți specifica numărul de coloane și lățimea optimă? Vіdpovіdno până la specifіkatsії, yomu vipadku număr-coloană setează numărul maxim de coloane:

Articolul ( coloane: 150px 3; /* lățimea coloanei: 150px; numărul coloanelor: 3; */ )

De fapt, urmărind dezvoltarea standardelor web, inclusiv ale articolelor mele despre CSS3 (de exemplu, minunat), sunt sigur că nu sunt mai puțin inspirat să mă minunez de posibilitatea ca acestea să apară în fața retailerilor web. Instrumentele receptive, flexibile și fără efort pentru gestionarea plasării conținutului l-au făcut mai aproape și mai accesibil. Iar deschiderea comenzilor pliante este mai simplă.

Interactiv

Vă puteți juca cu robotul multi-coloană CSS3 la ietestdrive.com:

Încearcă, experimentează. Informați comercianții cu amănuntul de browser despre erori. Și nu uitați să vă gândiți cum să susțineți browserele vechi (și moderne, dar încă nu la standard) - de exemplu, puteți modifica pluginul pentru jQuery Columnizer. Țineți cont de adaptabilitatea atât a ecranelor mici, cât și a celor mari.

Trepachov D.P. 2012-2020

Să învățăm: am vacanță până în a 6-a zi, în vacanță o pot face,
uneori pot să dispar pentru câteva zile

Aspect JavaScript PHP NodeJs Vue React Laravel WordPress AJAX Parsare Manipulare de bază Handyman Manipulare HTML Manipulare CSS OOP și MVC

Număr de coloane de putere

Sintaxă

Selector (număr de coloane: număr | automat; )

Valoare

Valoare cheie: auto.

la fund

A cărui aplicație are textul rozіb'єtsya 3 coloane(Evident, în browserele care acceptă conținut bogat în coloane, restul va fi doar text simplu într-o coloană):

#elem (număr de coloane: 3; text-align: justificare; )

">

la fund. valoare automată

În acest exemplu, este specificată lățimea lățimii coloanei 150px, și їх kіlkіst număr-coloană stai la punct auto- browserul însuși determină numărul de coloane și spațiul dintre ele:

#elem ( număr-coloană: automat; lățime-coloană: 150px; aliniere text: justificare; )

">

The Modul de aspect CSS cu mai multe coloane extinde modul de aranjare bloc pentru a permite definirea ușoară a mai multor coloane de text. Oamenii pot avea dificultăți în citirea textului, ca și cum linia ar fi veche; dacă este nevoie de prea mult timp pentru ca ochii să se miște de la sfârșitul unei linii la începutul următoarei, ei pierd evidența pe care linie se aflau. Acolo, pentru a ajunge la maximul de mare obrazovky, vlasnik-urile mamei vinovate a coloanei cu lățimea graniței și textul, ciufulit în mijloc, doar ca ziarele.

Deloc surprinzător, este imposibil să spargeți CSS și HTML fără a concentra rupturile de coloană în poziții fixe sau fără a restricționa sever marcajul permis în text sau fără a utiliza scripturi eroice. Există un hack pentru a crea noi puteri CSS pentru a extinde modul tradițional de blocare.

Folosind coloane

Numărul și lățimea coloanelor

Două proprietăți CSS controlează dacă și câte coloane apar: număr-coloană și lățime-coloană .

proprietatea column-count setează numărul de coloane la un anumit număr. De exemplu.,

Exemplul 1

HTML

css

#col ( număr de coloane: 2; )

rezultat

Va fi afișat în două coloane (precum și un browser compatibil cu mai multe coloane):

proprietatea column-width setează lățimea minimă dorită a coloanei. Dacă numărul coloanelor nu este setat, browserul va crea automat câte coloane se potrivesc în lățimea disponibilă.

Exemplul 2

HTML

css

#wid (lățimea coloanei: 100px; )

rezultat

Într-un bloc cu mai multe coloane, în loc să topești automat o coloană în următoarea, după cum este necesar. Toate funcțiile HTML, CSS și DOM sunt acceptate în arhive, cum ar fi editarea și imprimarea.

stenografia coloanelor

Mai mult timp și designerul web va modifica una dintre cele două proprietăți CSS: column-count sau column-width . Ca valoare pentru aceste puteri, pentru a nu se suprapune, este utilă pentru selecția scurtelor și coloanelor. De exemplu.

Declarația CSS lățime-coloană: 12em poate fi înlocuită cu coloane: 12em .

Exemplul 3

HTML

css

#col_short (coloane: 12em; )

Declarația CSS coloana-count: 4 poate fi înlocuită cu coloanele: 4 .

Exemplul 4

HTML

css

#columns_4 ( coloane: 4; )

rezultat

Cele două declarații CSS lățime-coloană: 8em și număr-coloană: 12 pot fi înlocuite cu coloane: 12 8em .

Exemplul 5

HTML

css

#columns_12 ( coloane: 12 8em; )

rezultat

Echilibrarea înălțimii

Specificația coloanei CSS3 necesită ca înălțimile coloanei să fie echilibrate: adică browserul setează automat înălțimea maximă a coloanei, astfel încât înălțimile conținutului din fiecare coloană să fie aproximativ egale. Firefox face asta.

Cu toate acestea, în unele cazuri, putem seta și nivelul maxim al coloanei în mod explicit, iar duhoarea va apărea în loc să tragă la prima coloană și să creeze coloane cât mai bogate, posibil, debordând spre dreapta. Prin urmare, la fel ca scrierea, inserarea, personalizarea CSS, puteți seta numărul maxim sau maxim de pictograme pe un bloc cu mai multe coloane, indiferent dacă o coloană este apăsată pe extensie, ceea ce nu este cazul, deoarece nu are legătură cu noul coloană. Această metodă este, de asemenea, mai eficientă pentru jaf.

Goluri de coloane

Există un decalaj între coloane. Valoarea implicită recomandată este 1em. Această expansiune poate fi modificată pentru o proprietate suplimentară coloane-gap pentru blocul cu mai multe coloane:

Exemplul 6

HTML

css

#column_gap ( coloană-număr: 5; coloan-gap: 2em; )

rezultat

degradare grațioasă

proprietățile coloanelor vor fi doar ignorate de browserele care nu acceptă coloane. Prin urmare, este relativ ușor să creați un aspect care să se afișeze într-o singură coloană în acele browsere și să utilizeze mai multe coloane în browserele compatibile.

Concluzie

Coloanele CSS3 sunt un aspect primitiv care îi va ajuta pe dezvoltatorii web să folosească cât mai bine spațiul imobiliar al ecranului. Dezvoltatorii imaginativi le pot găsi multe utilizări, în special funcția de echilibrare automată a înălțimii.

(lățimea optimă a coloanei) și numărul de coloane (numărul optim de coloane).

Suport de browsere

Sintaxa CSS:

coloane: „auto | lățimea coloanei numărul de coloane | inițial | moștenire”; Dacă valoarea este specificată ca număr întreg, aceasta va fi preluată până la valoarea puterii de numărare a coloanei, dacă este specificată în unități de subdiviziune CSS (px, mm, pt, thin), apoi până la lățimea coloanei. Este permis să spui ca unul, deci două sensuri într-un singur fără voce. coloane: „auto” coloane: „auto automat” /* lățime-coloană: auto; număr de coloane: automat */

Sintaxa JavaScript:

Object.style.columns = „auto auto”

Valoarea Yakosti

Valoare	Descriere
auto	Indică faptul că valorile de putere a lățimii coloanei și a numărului de coloane sunt setate la automat (lățimea și numărul coloanei sunt setate automat de browser - ceea ce înseamnă că elementul nu este bogat în coloane). Blocare valoare automată automată.
lățimea coloanei	Setează lățimea optimă a coloanei. Lățimea coloanei poate fi mai mare datorită prezenței spațiului liber, altfel valoarea lățimii mai mari posibile a coloanei este deja setată. Valorile lățimii sunt specificate în unități CSS (px, mm, pt sau cam asa ceva). Sensul poate fi destul de pozitiv. Vă implor respectul că niciunul dintre semnificațiile atribuite vіdsotkah nu este permis. Valoarea promovată este automată.
număr-coloană	Specifică numărul optim de coloane. Valoarea este specificată ca număr întreg. Valoarea promovată este automată.
	Restabilirea puterii de semnificație pentru încuietori.
	Arată că sensul este în declin în fața elementului Batkiv.

Versiunea CSS

CSS3

declin

Ni.

Animaţie

Asa de.

Butt vikoristannya