Fun ọpọlọpọ ọdun, CSS awọn ọkọ oju omi ti jẹ ọpa, sibẹsibẹ o jẹ dandan, paati ni ṣiṣe awọn ipilẹ aaye ayelujara. Ti aṣiṣe rẹ ba n pe fun awọn ọwọn pupọ, o yipada si awọn ọkọ oju omi . Iṣoro pẹlu ọna yii ni pe, pelu iloyeloye ti o ṣe afihan ti awọn apẹẹrẹ ayelujara / awọn oludasile ti fihan ni ṣiṣẹda awọn ipilẹ oju-iwe ayelujara ti o lagbara, awọn fifẹ CSS ko ṣe pataki lati lo ni ọna yii.
Lakoko ti awọn ọkọ oju omi ati CSS ipo ni o ni idaniloju lati ni ibi kan ninu apẹrẹ ayelujara fun ọpọlọpọ ọdun lati wa, awọn imuposi titun ti o wa pẹlu CSS Grid ati Flexbox n funni ni awọn apẹẹrẹ ayelujara awọn ọna titun lati ṣẹda awọn ipilẹ ojula wọn. Ilana ẹrọ titun miiran ti o ṣe afihan ọpọlọpọ awọn agbara ni CSS Multiple Columns.
Awọn bọtini CSS ti wa ni ayika fun awọn ọdun diẹ bayi, ṣugbọn aini atilẹyin ni awọn aṣàwákiri ti ogbologbo (ni pato awọn ẹya àgbà ti Internet Explorer) ti pa ọpọlọpọ awọn akọọlẹ wẹẹbu lati lo awọn aza wọnyi ni iṣẹ iṣẹ wọn.
Pẹlu opin atilẹyin fun awọn ẹya agbalagba ti IE, diẹ ninu awọn apẹẹrẹ oju-iwe ayelujara ti n ṣawari pẹlu awọn aṣayan akọkọ CSS, awọn CSS Columns, ati wiwa pe wọn ni iṣakoso diẹ sii pẹlu awọn ọna tuntun wọnyi ju ti wọn ṣe pẹlu awọn ọkọ oju omi.
Awọn orisun ti CSS awọn ọwọn
Gẹgẹbi orukọ rẹ ṣe ni imọran, CSS Multiple Columns (tun mọ CSS3 ifilelẹ awọn iwe-ipele) jẹ ki o pin akoonu sinu nọmba ti o ṣeto awọn ọwọn. Awọn ohun-elo CSS ti o ni ipilẹ julọ ti iwọ yoo lo ni:
- iwe-iwe-iwe
- iwe-igun-iwe
Fun iwe-kika, iwọ pato nọmba ti awọn ọwọn ti o fẹ. Iwọn iwe naa yoo jẹ awọn gutters tabi aye laarin awọn ọwọn. Oluṣakoso naa yoo gba awọn iṣiro wọnyi ki o si pin awọn akoonu ni otitọ si nọmba ti awọn ọwọn ti o pato.
Apeere ti o wọpọ ti awọn ọwọn CSS pupọ ni iwa yoo jẹ lati pin ipin ti akoonu ọrọ sinu awọn ọwọn ti o pọ, iru si ohun ti iwọ yoo ri ninu iwe irohin kan. Sọ pe o ni atokọ HTML ti o tẹyi (akiyesi pe fun apẹẹrẹ awọn idi, Mo nfi ipilẹ paragika kan nikan han, lakoko ti o wa ni iṣe o le jẹ ọpọ awọn iwe-ọrọ akoonu ninu aami yi):
Awọn akori ti article rẹ
Fojuinu ọpọlọpọ awọn apejuwe ọrọ diẹ nibi ...
Ti o ba kọwe wọnyi CSS wọnyi:
.content {-moz-iwe-ka: 3; -iwitiwia-iwe-iwe-ka: 3; iwe-ka: 3; -moz-column-gap: 30px; -webkit-column-gap: 30px; iwe-fifin: 30px; }Ilana CSS yi yoo pin pipin "akoonu" si 3 awọn ọwọn ti o yẹ pẹlu iwọn ti 30 awọn piksẹli laarin wọn. Ti o ba fẹ awọn ọwọn meji dipo 3, iwọ yoo yi iyipada naa pada nikan ati pe aṣàwákiri yoo ṣe iṣiro awọn gbooro titun ti awọn ọwọn naa lati pin awọn akoonu naa ni otitọ. Ṣe akiyesi pe a ma nlo awọn ipo-iṣowo-tẹlẹ ti a ti ṣaju silẹ, tẹle awọn ikede ti kii ṣe tẹlẹ.
Bi rọrun bi eleyii ṣe, lilo rẹ ni ọna yii jẹ ohun ti o ṣe ojulowo fun lilo aaye ayelujara. Bẹẹni, o le pin ipinpọ akoonu sinu awọn ọwọn ọpọ, ṣugbọn eyi le ma jẹ iriri kika ti o dara julọ fun oju-iwe ayelujara, paapaa bi awọn giga wọnyi ba ṣubu ni isalẹ "agbo" ti iboju naa.
Awọn olukawe naa yoo ni lati yi lọ si oke ati isalẹ lati le ka akoonu kikun. Sibẹ, awọn orisun CSS jẹ rọrun bi o ti ri nibi, ati pe a le lo o lati ṣe ju Elo pin awọn akoonu ti diẹ ninu awọn paragirafi - o le, nitootọ, ṣee lo fun ifilelẹ.
Ìfilélẹ Pẹlu Awọn bọtini CSS
Sọ pe o ni oju-iwe wẹẹbu kan pẹlu aaye agbegbe ti o ni 3 awọn ọwọn akoonu. Eyi jẹ oju-iwe aaye ayelujara ti o jẹ aṣoju pupọ, ati lati ṣe aṣeyọri awọn ọwọn mẹta naa, iwọ yoo ma ṣafo awọn ipele ti o wa ninu rẹ nigbamii. Pẹlu CSS ọpọ-awọn ọwọn, o jẹ rọrun pupọ.
Eyi ni diẹ ninu awọn ayẹwo HTML:
Awọn Irohin Titun
Iyipada yoo lọ nibi ...
Lati Wa Blog
Imọlẹ yoo lọ nibi ...
Awọn iṣẹlẹ to n ṣẹlẹ
Awọn akoonu yoo lọ nibi ...
CSS lati ṣe awọn ọwọn ọpọ yii bẹrẹ pẹlu ohun ti o ri tẹlẹ:
.content {-moz-iwe-ka: 3; -iwitiwia-iwe-iwe-ka: 3; iwe-ka: 3; -moz-column-gap: 30px; -webkit-column-gap: 30px; iwe-fifin: 30px; }Nisisiyi, ipenija nibi ni pe, niwon aṣàwákiri nfẹ lati pin akoonu yii ni otitọ, nitorina bi ipari akoonu ti awọn ipinya yi yatọ si, pe aṣàwákiri naa yoo pin awọn akoonu ti ipinnu kọọkan, fifi aaye bẹrẹ si ẹyọkan kan ati ki o si tẹsiwaju si ẹlomiiran (o le wo eyi nipa lilo koodu yii lati ṣe idanwo ati fi awọn oriṣiriṣi awọn akoonu ti o wa ninu ipin kọọkan)!
Eyi kii ṣe ohun ti o fẹ. O fẹ ipinfunni kọọkan lati ṣẹda iwe kan pato ati pe, bii bi o ṣe jẹ pe akoonu tabi ipin kekere ti ipinya kọọkan le jẹ, iwọ ko fẹ ki o pin. O le ṣe aṣeyọri eyi nipa fifi afikun ila afikun yii ti CSS kun:
Ifihan àfihàn: apẹrẹ-inline; }Eyi yoo ṣe ipa awọn ipin ti o wa ninu "akoonu" lati wa ni idaniloju paapaa bi aṣàwákiri ṣe pin eyi si awọn ọwọn pupọ. Paapa julọ, niwon a ko fun ohunkohun nibi iwọn ti o wa titi, awọn ọwọn wọnyi yoo ṣe atunṣe laifọwọyi bi aṣàwákiri ti bẹrẹ, ṣiṣe wọn ni ohun elo ti o dara julọ fun awọn aaye ayelujara idahun . Pẹlú "ara-inline-block" ti o wa ni ibi, kọọkan ninu awọn ipele mẹta rẹ yoo jẹ iwe ti akoonu kan pato.
Lilo Ṣiṣe-Iwọn
Nibẹ ni ohun elo miiran lẹgbẹẹ "iwe-kaakiri" ti o le lo, ati da lori awọn eto ifilelẹ rẹ, o le jẹ aṣayan ti o dara julọ fun aaye rẹ. Eyi jẹ "iwọn-ẹgbẹ". Lilo aṣiṣe HTML kanna bi a ṣe han tẹlẹ, a le ṣe eyi pẹlu CSS wa:
.content {-mo-iwe-iwọn: 500px; -iṣẹ-apo-iwe-iṣẹ-iwe-iwọn: 500px; iwe-ẹgbẹ-ẹgbẹ: 500px; -moz-column-gap: 30px; -webkit-column-gap: 30px; iwe-fifin: 30px; } .afihan àfihàn: iṣeduro-inline; }Ọna ti eyi n ṣiṣẹ ni pe aṣàwákiri nlo "iwọn-ẹgbẹ" yii bi iye ti o pọ julọ ti iwe naa. Nitorina ti window window ba jẹ kere ju 500 awọn piksẹli to gaju, awọn ipin mẹta wọnyi yoo han ninu iwe kan, ọkan ninu awọn ori oke miiran. Eyi jẹ ifilelẹ aṣoju ti a lo fun awọn ọna šiše alagbeka / kekere iboju.
Bi iwọn aṣàwákiri ṣe n pọ si lati tobi to lati ba awọn ọwọn 2 pọ pẹlu awọn oju-iwe iwe-aṣẹ ti a pàdánù, aṣàwákiri yoo laifọwọyi lọ lati ifilelẹ kanṣoṣo si awọn ọwọn meji. Tesiwaju si iwọn iboju naa ati ni ipari, iwọ yoo gba aami ẹri 3, pẹlu kọọkan awọn ipin mẹta wa ni afihan wọn. Lẹẹkansi, ọna eleyi ni ọna pupọ lati gba awọn idahun diẹ, awọn ọna ẹrọ amọye ti ọpọlọpọ-ẹrọ , ati pe o ko nilo lati lo awọn ibeere igbasilẹ lati yi awọn ifilelẹ ti aṣewe pada!
Awọn Ile-iṣẹ Ibugbe miiran
Ni afikun si awọn ohun-ini ti a bo nibi, awọn ohun-ini tun wa fun "ofin-aṣẹ", pẹlu awọ, ara, ati awọn iwọn ijinlẹ ti o jẹ ki o ṣẹda awọn ofin laarin awọn ọwọn rẹ. Awọn wọnyi yoo ṣee lo dipo awọn aala ti o ba fẹ lati ni diẹ ninu awọn ila ti o sọtọ awọn ọwọn rẹ.
Akoko lati Idanwo
Lọwọlọwọ, Layout Afikun Ọpọlọpọ CSS jẹ atilẹyin daradara. Pẹlu awọn prefixes, o ju 94% ti awọn olumulo ayelujara yoo le ri awọn aza wọnyi, ati pe ẹgbẹ ti ko ni idaabobo yoo jẹ awọn ẹya ti o ti dagba julọ ti Internet Explorer ti o ko le ṣe atilẹyin fun rara.
Pẹlu ipele ipele atilẹyin bayi ni ipo, ko si idi kan lati ma bẹrẹ idanwo pẹlu CSS awọn taabu ati gbigbe awọn aza wọnyi ni awọn aaye ayelujara ti o ṣetan. O le bẹrẹ awọn igbadun rẹ nipa lilo awọn HTML ati CSS ti a gbekalẹ ni akọọlẹ yii ki o si wa ni ayika pẹlu awọn oriṣiriṣi awọn ipo lati wo ohun ti yoo ṣiṣẹ julọ fun awọn eto ifilelẹ ti aaye rẹ.