Gelek salan, CSS floats ji hêla malperên çêkirina malperê çêbikin, hê jî hewce ye. Heke dîznavê ji bo ku hûn ji hêla kolanan re tê gotin, hûn vegerin . Pirsgirêka vê rêbazê ev e ku, tevî ku hêja neheqdar e ku sêwirîner / pêşdebirkerên ku di navnîşên malperên complex ên damezirandin de nîşanî nîşanî nîşanî nîşanî nîşanî nîşanî nîşan kirin, bi rastî vê yekê wateya ku bi vî awayî tê bikaranîn.
Dema ku diqewimin û pispora CSS de piştrast e ku di nav çend salan de çêbikin, cîhên teknolojî yên nû hene, wekî CSS Grid û Flexbox niha dakêşkerên nû yên nû çêbikin ku rêgezên xwe çêbikin. Teknîkî ya nû ya teknîkî ku nîşan dide gelek pir potansiyonên CSS-ê pir pir e.
Dema CSS-dora çend salan e, lê belê ne kêmbûna piştevanîya gerokên kevn ên kevn (guhertoyên nû yên înternetê yên înternetê) gelek profesyonelên ku ji van karanîna hilberîna hilberîna wan de bikar tînin.
Bi dawiya piştevanîya piştgiriya kesên ku kevnên mezin ên IE, hinek sêwirînerên hinek webê bi bijartên CSS veguherînek nû bikar bînin, CSS Columnên tevlî bûn, û dîtina ku ew bi rêbazên van nuh ji wan re bi qewimên xwe re hatine kontrol kirin.
Basics of CSS Columns
Wekî navê navnîşan dide, CSS-ê pir pir-stûn (wekî pirtirkêmtir CSS2-ê-ê-yê-ê tê zanîn) hûn dikarin ji bo hejmareke hejmareke hejmaran de hebin. Parîteyên CSS yên herî bingehîn ku hûn bikar bînin:
- hejmar
- kolonî
Ji bo hejmar-hejmara, hejmara hejmareyên ku hûn dixwazin dixwazin. Vala kolon dê gutter an di nav wan kolanan de dabeş bikin. Bêguman dê van nirxan bistînin û naveroka naveroka nav hejmareyên ku hûn diyar dikin.
Nimûneyeke hevbeş a CSS-ê di pir pratîkê de dê ji bloka nivîskî deverek bi çend-re-columnan veşartin. Bêjin ku we nîşan bide HTML-ê heye (nimûne wekî mînaka, ez tenê destpêka yek parve bikim, dema ku di praktîkê de dê dibe ku pir caran parçeyek materyalî di vê nîşangehê de):
Sernivîsa we ya gotara
Bi gelek paragraphs of text here binirxînin ...
Heke hûn hingê van şêweyên CSS-ê nivîsî:
.content {-moz-column-count: 3; -webkit-column-count: 3; column-count: 3; -moz-column-gap: 30px; -webkit-column-gap: 30px; column-gap: 30px; }Rêjeya vê CSS dê dê "naveroka" perçeyê di nav blokên wekhevî de bi navbera 30 pixel di navbera wan de parçe bikin. Heke hûn du qutên 3-ê dixwest dixwazin, hûn bi tenê bigihîjin ku nirx û bêjeyê bi çarçoveyên nû yên wan-bloyan re hesab bikin ku ji bo naveroka naveroka perçeyê parve bikin. Têbînî ku em pêşî li milkên pêşdestî yên pêşdestî bikar bînin, piştî peyivînên ne-pêşniyazkirî.
Wek hêsan hêsan e, bi vî rengî wê bikar anîn ku ji bo malpera bikaranîna malperê. Erê, hûn dikarin kûrek naveroka nav çend reşan de parçe bikin, lê ev dibe ku ezmûnek xwendina herî baş ji bo Webê, bi taybetî eger hebûna van dîmên di binê "screen" de binê bin.
Pêwîstvan dê pêdivî ye ku pirtûkek temamî bixwînin. Hê jî, sereke ya Sîstema CSS-ê hêsan e ku hûn li vir bibînin, û dikare bikaribin ji hêla hêsanî ya naveroka hin parçeyên parçe bikin.
Layout With Columns CSS
Bêjin ku hûn malperek xwedî bi naveroka naverokê heye ku 3 stûnên naverokê hene. Ew malpera gelemperî gelemperî ye, û ji bo van 3-stûnên wergirtin, hûn ê di dabeşên dabeşên ku di hundurê CSS-ê de bi gelemperî, hêsantir e.
Li vir çend hinek modelek HTML heye:
Dîroka Nûçeyan
Naveroka vê derê wê here ...
Ji Ji me veguhastin
Vegereyek wê derê here!
Çalakiyên pêşeroj
Naveroka wê dê here! p>
CSS-ê ku ji van kolanan re dest pê dike ku hûn berê berê dîtine dest pê dike:
.content {-moz-column-count: 3; -webkit-column-count: 3; column-count: 3; -moz-column-gap: 30px; -webkit-column-gap: 30px; column-gap: 30px; }Niha, gengaz li vir e ku, ji ber ku geroktorek ew eynî materyal eşkere dike, da ku eger naveroka naveroka van parçeyên cuda ne, ew ê geroka rastiya naveroka perçeyek kesek parve dike, û dest pê kir ku ew bi yek-reş û Piştre berdewam bike (hûn dikarin bi vê kodê bikar bînin ku ji ceribandinê veguherînin û dirêjtirîn naveroka celeb di nav her perçeyê de zêde bikin)!
Ew ne ku hûn çi dixwazin. Hûn dixwazin her van parçeyên ku ji blokek cuda cuda çêbikin û ne, çiqas mezin an naverokek naveroka dabeşkirina perçeyek dibe ku hûn nebin. Hûn dikarin vê yekê bigihînin vê rêza vî awayî ya CSS-ê zêde bike:
.content div {display: inline-block; }Ew dê wan parçeyên ku di hundirê "naveroka" de bimînin heta ku bimîne, her weha gerokê ew di nav çend-hebên cuda de parçe dike. Heta ku çêtirîn, ji ber ku em li vir hêjek çarçoveya xeletek neda dayîn, ew blovên bixweber dê wekî gerokê veguherîne, ji bo daxwaznameyên îdeal ji bo malperên bersivên xwe çêbikin . Bi vê şêweya "stûya inline-block" di cih de, her sê parçeyek dê di navnîşa naverokê de naveroka vala.
Bikaranîna Column-Width
Li malperê din heye "bila" -kêşk ", ku hûn dikarin bikar bînin, û hewceyê hewceyên pêwîst ên we, lê dibe ku ji bo malpera xwe çêtirîn çêtir çêtir be. Ev "column-width" e. Bikaranîna heman HTML-ê bi karûbarên berê ve tê bikaranîn, em dikarin bi vê yekê bi CSS-ê re bikin:
.content {-moz-column-width: 500px; -webkit-column-width: 500px; column-width: 500px; -moz-column-gap: 30px; -webkit-column-gap: 30px; column-gap: 30px; } .bigere div {display: inline-block; }Riya ku ev karan e, ew e ku ew gavê vê "column-width" tê bikaranîn ku wekî nirxa herî zêde ya dora. Ji ber ku eger paceya sêwirdar ji 500 pîrek dûrtir e, ev 3 parçeyan di nav yek yekemîn de, yek yekeyên din ên din. Ev cureya taybet e ku ji bo klavyeyên mobîl / piçûk tê bikaranîn.
Çawa ku geroka çarçoveyê zêde dibe ku hebe hema hebe du blovên bi digel kolonî de, bixweber dê otomatîk ji hêla yekemîn-a-columnê veşêre her du-columnan vebigere. Hêza çirbûnê zêde bikin û bi dawiyê, hûn ê sê sêweya dîmendeyê bistînin, bi her sê parçeyên me di binavê xwe de nîşan dide. Hingê dîsa, ew rêbazek mezin e ku hin bersivên pirzimanî yên pirrjimar digire , û hûn hewce ne hewce ne ku ji bo pirsên medyayê yên ji bo şêweyên guhertinê biguherînin!
Proper Columns Other
Ji bilî van milkên ku li vir ve girêdayî ye, hejmaran ji bo "qalaxa", tevlî nirxên rengîn, şêwirdar û çarçoveyê hene ku hûn destûrên ku di navbera weşanên we de çêbikin. Ev dê li gorî sînor bikar bînin eger eger hûn dixwazin ku hin hûrgehên blovên xwe cuda bikin.
Demjimêrê Xwe
Niha, CSD Pirrjimar Pirrjimar pir piştgirî ye. Bi pêşniyazên ku ji% 94 bikarhênerên malper ê dê bikaribin van şêweyên temaşe bibînin, û ku ew komên ne piştgirtî nebûya bi tenê guhertoyên kevntir ên yên înternetê yên ku hûn nikarin piştgirî nebin.
Bi vê astê piştevanîya niha heye, sedem tune ne sedem nabe ku bi Columnên CSS re dest pê bikin û ev şêweyên di hilberên malperan de amadekirin. Hûn dikarin bi karanîna HTML û CSS-ê bi vê gotarê têne pêşkêş kirin û li ser nirxên cûda bidin lîstin bikin ku bibînin ka çi hewce ye ku ji bo hewceyên malpera we çêtirîn bixebite.