Izmantojot tikai dažus CSS noteikumus, varat izveidot drukas iedvesmotu izkārtojumu, kas nodrošina tīmekļa elastību. Tas ir tāpat kā paņemt avīzi, bet, kad papīrs kļūst mazāks, kolonnas automātiski pielāgosies un līdzsvarosies, ļaujot saturam plūst dabiski.
.intro ( columns: 300px 2; )columnsĪpašums pieņems column-count, column-widthvai abas īpašības.
columns: || ;Izmantojot gan column-count, un column-widthir ieteicams, lai izveidotu elastīgu vairāku kolonnu izkārtojumu. column-countDarbosies kā maksimālo skaitu kolonnu, kamēr column-widthbūs diktēt minimālo platumu katras kolonnas. Apvienojot šos rekvizītus, vairāku kolonnu izkārtojums automātiski sadalīsies vienā kolonnā ar šauru pārlūka platumu, neizmantojot multivides vaicājumus vai citus noteikumus.
Vairāku kolonnu izkārtojums lieliski darbojas bloku elementos, ieskaitot sarakstus, lai izveidotu elastīgu navigāciju.
Lai vēl vairāk pielāgotu vairāku kolonnu izkārtojumu, izmantojiet break-insidekonkrētus elementus, lai tie netiktu iesprūduši starp kolonnām.
Vairāk informācijas
- CSS vairāku kolonnu izkārtojuma moduļa 1. līmenis (darba melnraksts)
- MDN dokumentācija
Pārlūkprogrammas atbalsts
| IE | Mala | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| 10+ | Viss | 9+ | 50+ | Viss | 11.5+ |
| Android Chrome | Android Firefox | Android pārlūks | iOS Safari | Opera Mobile |
|---|---|---|---|---|
| Viss | Viss | Viss | Viss | Viss |
