O prescurtare pentru stilurile de linii de împărțire cu reguli de coloană. Cum funcționează: codul CSS explicat

Cum se pot face coloane

Mai întâi, să ne uităm la câteva moduri în care puteți crea coloane, apoi vom trece peste câteva exemple.

Folosind blocuri plutitoare. Astăzi, acesta este cel mai popular mod de a face difuzoare, deși flexbox începe încet să-l aglomereze. În mod implicit, două blocuri în flux normal nu pot fi pe aceeași linie, dar acest comportament poate fi ușor modificat prin setarea atât a proprietății float: left | dreapta. Vor începe să se ghemuiască până la marginea stângă sau dreaptă. Pentru ca blocul care îi urmărește să perceapă blocurile plutitoare și să le plaseze corect, trebuie scris clar: ambele.

Cu ajutorul plutitoarelor se fac cel mai adesea 2 sau 3 coloane. Dispunerea unui site cu blocuri plutitoare nu este foarte dificilă, trebuie doar să cunoașteți câteva dintre nuanțele comportamentului lor. De exemplu, dacă trebuie să faceți o zonă pentru afișarea articolelor, iar în dreapta - o bară laterală cu un meniu, blocurile plutitoare implementează foarte ușor acest aranjament.

Folosind tabele. Tabelele au fost în general create pentru a afișa un număr mare de celule și coloane, așa că a face coloane în ele este o simplă simplă. Tabelul poate avea cel puțin 20 de coloane. Întreaga sa structură este setată în cod html, așa că codul se dovedește a fi destul de greoi.

Deoarece celulele din tabel pot fi setate la orice dimensiune, aproape toate site-urile erau folosite pentru aspect. De exemplu, pentru a implementa cel mai simplu aspect (header, content, sidebar, footer), au fost realizate trei rânduri în tabel (rândul tabelului este format din eticheta tr). Fiecare rând conține două celule, deoarece conținutul și bara laterală trebuie păstrate separate unul de celălalt. Și în antet și subsol, aceste celule au fost pur și simplu conectate folosind atributul colspan al etichetei td, dacă este necesar.

Puteți elimina cu ușurință chenarul din celule, ceea ce a făcut ca dezvoltatorii web să formeze cu ușurință șabloane cu structură complexă.

Cu flexbox. Aceasta este o tehnologie modernă care a început să se răspândească în 2014, deși a existat înainte. Esența sa este următoarea: se creează un bloc container general, în care sunt plasate alte blocuri, care vor trebui realizate sub formă de coloane, apoi afișați: flex trebuie să fie atribuit acestui container.

Apoi, de obicei setați proprietatea flex-direction, care determină direcția axei principale de-a lungul căreia vor fi poziționate casetele. Valorile pot fi setate la: rând și coloană. Prima valoare va direcționa blocurile orizontal de la dreapta la stânga, a doua - în jos. De asemenea, puteți seta inversul: flex-direction: row-reverse. Blocurile vor fi amplasate de la dreapta la stânga.

Există, de asemenea, un set de proprietăți separate pentru blocurile copii ale containerului flexibil. Practic, aceste proprietăți vă permit să setați dimensiunea blocului și comportamentul acestuia în raport cu alte elemente.

Avantajul flexbox este că este mult mai flexibil. Dacă, în aspectul bloc, dezvoltatorii web trebuiau adesea să calculeze totul pixel cu pixel, setând indentările corecte, adăugând diverse trucuri la cod, astfel încât totul să nu se destrame, atunci elementele flex stau cu ușurință într-o coloană, într-un rând și în general necesită mult mai puține calcule matematice din exterior.dezvoltator.

Împărțirea textului în coloane

Cu toate acestea, nu am atins încă cel mai important subiect. CSS oferă astăzi posibilitatea de a împărți textul într-o casetă principală fără a fi nevoie de casete flotante, tabele sau casete flexibile. Adică, un bloc obișnuit rămâne în html, iar textul este împărțit în coloane exclusiv datorită css.

Deci, proprietățile enumerate mai jos se aplică unui bloc în care textul trebuie împărțit în mai multe coloane.

Număr de coloane - proprietatea stabilește numărul de coloane în care trebuie împărțit textul. Este recomandat să setați valoarea de la 2 la 4, în funcție de cum vă place.

Lățimea coloanei - setează numărul de caractere text dintr-o coloană. Subliniez că lățimea coloanei în acest caz este stabilită nu de pixeli, ci de numărul de caractere. Optimal: 30-50 de caractere într-o coloană. De asemenea, această proprietate nu poate fi numită în niciun fel cross-browser, deoarece setați doar numărul dorit de caractere, dar încă nu se știe dacă browserul va acționa în conformitate cu dorințele dumneavoastră.

Column-gap - definește distanța dintre coloane. Poate fi setat în pixeli.

Regulă-coloană - Desenează o linie care separă coloanele. Sintaxa proprietății este identică cu proprietatea border. În primul rând, se înregistrează grosimea liniei, apoi tipul acesteia și apoi culoarea.

De asemenea, aș dori să menționez că toate aceste proprietăți css sunt relativ noi. De exemplu, Internet Explorer le acceptă doar din a zecea versiune. Acestea sunt proprietăți din standardul CSS3, așa că dacă urmează să le folosiți pe site-ul dvs., atunci trebuie să aveți grijă de compatibilitatea între browsere, altfel nu vor exista coloane în versiunile mai vechi de Opera și IE.

Exemple de

Blocuri plutitoare. Aspectul unui site în două coloane se face cel mai adesea foarte simplu folosind blocuri plutitoare. În css, este implementat astfel:

Float-block1 (float: stânga) .float-block2 (float: stânga) bloc care ar trebui să fie sub floats (clear: stânga | ambele)

Adică blocul inferior trebuie specificat cu această proprietate, astfel încât să fie poziționat corect. Astfel, cutiile plutitoare vor deveni o singură linie dacă sunt suficient de largi în elementul părinte. Desigur, trebuie să specificați și lățimea, înălțimea și chenarul blocurilor, astfel încât să arate ca în această captură de ecran:

Acum hai să facem partea distractivă. Să adăugăm mult text aleatoriu în blocul principal și să încercăm să-l afișam acolo în trei coloane, ca într-un ziar sau o revistă. Pentru a face acest lucru, trebuie să adăugați astfel de reguli la codul acestui bloc.

În articolul de astăzi, vreau să vorbesc despre o nouă modalitate de a crea coloane de înălțime egală folosind CSS. Nu mai trebuie să utilizați Javascript pentru a face înălțimile coloanelor la fel pentru toată lumea. Esența acestei metode este să folosim o nouă proprietate CSS3 care ne oferă mult mai multe opțiuni decât simpla creare a coloanelor de aceeași înălțime. Dar în această lecție ne vom uita la cât de ușor este să rezolvi această problemă dureroasă.

Aranjament în pagină

Partea HTML

Să definim două coloane, pe care în viitor le vom face aceeași înălțime folosind CSS:

Adică trebuie să facem blocul