Modulul CSS Multi-colon Layout este un instrument puternic care vă permite să creați cu ușurință machete cu mai multe coloane pentru paginile dvs. web. Creșterea designului responsive înseamnă că este important să înțelegeți cum să utilizați acest modul.
Puteți utiliza proprietățile coloanei pentru a crea aspecte flexibile și dinamice care se adaptează la diferite dimensiuni de ecran.
Specificarea numărului coloanei, lățimii și intervalului
Pentru a crea un aspect adecvat în mai multe coloane pentru conținutul paginii dvs., ar trebui să începeți prin a decide câte coloane doriți să se întinde. Una dintre cele mai importante proprietăți din modulul Multi-coloană este număr de coloane proprietate, pe care o utilizați pentru a seta numărul de coloane în care să împărțiți conținutul.
De exemplu:
.container {
număr de coloane: 3;
}
De asemenea, puteți specifica lățimea și distanța coloanelor. Puteți seta valoarea lățimii coloanei folosind oricare dintre unitățile CSS acceptate ca px, ei, sau %.
Dacă
lățimea coloanei este setat sa auto, browserul va calcula lățimea fiecărei coloane pe baza număr de coloane proprietatea și spațiul disponibil în interiorul aspectului dvs.De exemplu, acest CSS declară 3 coloane, fiecare cu o lățime de 200 pixeli:
.container {
număr de coloane: 3;
lățimea coloanei: 200px;
}
The coloană-decalaj proprietatea specifică decalajul sau spațiul dintre coloane într-un aspect cu mai multe coloane. Acesta va seta dimensiunea spațiilor goale între coloanele adiacente și poate lua o valoare a lungimii în pixeli, ems sau orice alte unități acceptate.
De exemplu:
.container {
număr de coloane: 3;
coloană-decalaj: 20px; /* setează distanța dintre coloane la 20 de pixeli */
}
În mod implicit, valoarea lui coloană-decalaj este setat sa normal. Browserul dvs. alege această valoare pentru a obține o spațiere consistentă între coloanele din aspectul dvs., rămânând în același timp plăcut din punct de vedere vizual. Această valoare poate varia și între browser și poate depinde și de dimensiunea fontului, înălțimea liniei, proprietatea poziției, și alte proprietăți de aspect ale conținutului coloanelor.
Asigurarea echilibrului coloanelor
Coloanele CSS încearcă să umple tot spațiul disponibil în interiorul unui aspect. Acest lucru poate duce uneori la coloane care au înălțimi semnificativ diferite, făcând aspectul neuniform.
Pentru a echilibra coloanele, ar trebui să vă asigurați că fiecare coloană din aspectul dvs. are aproximativ aceeași cantitate de conținut.
Puteți realiza acest lucru setând CSS coloană-umplere proprietate la echilibru. Un browser va încerca apoi să distribuie conținutul uniform în toate coloanele, astfel încât acestea să aibă aproximativ aceeași înălțime.
The coloană-umplere proprietatea este setată la echilibru implicit, dar o valoare de auto va schimba acest comportament. Utilizarea automată distribuie conținutul pe coloane în funcție de spațiul disponibil. Acest lucru poate duce la distanțe neuniforme între coloane și înălțimi neuniforme ale coloanei. Poate chiar produce un aspect cu coloane goale.
Iată un exemplu despre cum să utilizați coloană-umplere proprietate pentru a echilibra coloanele într-un aspect cu mai multe coloane:
.aspect cu mai multe coloane {
număr de coloane: 3;
coloană-decalaj: 20px;
coloană-umplere: echilibru;
}
În acest exemplu, avem un aspect cu mai multe coloane cu trei coloane și un spațiu de 20 de pixeli între fiecare coloană. Prin setarea coloană-umplere proprietate la echilibru, ne asigurăm că conținutul se distribuie uniform între coloane, rezultând înălțimi echilibrate ale coloanelor.
Este important de reținut că coloană-umplere proprietatea poate să nu funcționeze bine pentru toate aspectele și poate avea ca rezultat o distanță neuniformă între coloane. În astfel de cazuri, poate fi necesar să utilizați JavaScript pentru a echilibra manual coloanele. Nu uitați să urmați cele mai bune practici și utilizați îmbunătățirea progresivă astfel încât să nu vă bazați pe JavaScript.
Punând totul laolaltă
Puteți reuni tot ce ați învățat despre implementarea unui aspect cu coloane CSS și îl puteți utiliza pentru a crea un aspect în stil revistă.
Mai întâi, creați structura HTML de bază. Folosiți un element container pentru a vă împacheta conținutul, apoi creați mai multe elemente copil pe care apoi le puteți dispune în coloane.
html>
<html>
<cap>
<legăturărel="foaia de stil"href=„CSScolumns.css” />
cap>
<corp>
Element Container
<divclasă="aspect-revista">Elemente copil
<divclasă="articol">
<h2>Titlul articoluluih2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in
magna vel lorem pharetra bibendum.p>
div><divclasă="articol">
<h2>Titlul articoluluih2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in
magna vel lorem pharetra bibendum.p>
div><divclasă="articol">
<h2>Titlul articoluluih2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in
magna vel lorem pharetra bibendum.p>
div>
div>
corp>
html>
Pentru a crea un aspect în stil revistă folosind modulul CSS cu mai multe coloane, combinați număr de coloane, lățimea coloanei, coloană-decalaj, și coloană-umplere proprietati:
.magazin-aspect {
număr de coloane: 3;
lățimea coloanei: 300px;
coloană-decalaj: 20px;
coloană-umplere: echilibru;
}
.articol {
culoare de fundal: #f8f8f8;
hotar-raza: 4px;
cutie-umbră: 0 2px 4pxrgba(0, 0, 0, 0.1);
căptușeală: 10px;
spargere în interior: evitare-coloană;
}
Acest exemplu definește și spargere în interior proprietate de pe .articol clasa, cu o valoare de evitare-coloană. Proprietatea asigură că fiecare articol rămâne într-o singură coloană, în loc să fie împărțit în mai multe coloane. Iată cum ar trebui să arate aspectul:
Utilizarea alternativelor pentru browsere neacceptate
Este important de reținut că număr de coloane proprietatea nu este acceptată în toate browserele. Browsere care nu acceptă număr de coloane, va afișa conținutul într-o singură coloană.
Pentru a oferi stiluri alternative pentru browsere neacceptate, puteți utiliza interogări de caracteristici precum @sprijină pentru a detecta suportul pentru număr de coloane proprietate și oferă stiluri alternative atunci când proprietatea nu este acceptată.
De exemplu:
.container {
/* Fallback pentru browsere care nu acceptă numărul de coloane */
lăţime: 100%;
}
/* Detectează suportul pentru numărul de coloane */
@sprijină (număr de coloane:3) {
.container {
număr de coloane: 3;
}
}
În acest exemplu, folosim @sprijină interogare de caracteristică pentru a detecta suportul pentru număr de coloane proprietate. Dacă browserul acceptă numărul de coloane, recipient elementul va fi afișat în trei coloane. Dacă browserul nu acceptă numărul de coloane, acesta va afișa conținutul într-o singură coloană folosind lăţime proprietate.
Împărțirea conținutului în coloane
În general, coloanele CSS oferă o modalitate practică și puternică de a crea aspecte flexibile și receptive pe mai multe coloane, care îmbunătățesc gradul de utilizare și experiența de utilizare a conținutului web.
Folosind împreună coloanele CSS și JavaScript, puteți crea aspecte și mai sofisticate și mai dinamice care se adaptează la diferite preferințe ale utilizatorilor și dimensiuni ale dispozitivelor, făcând conținutul dvs. web mai accesibil și mai atractiv pentru utilizatorii dvs.
