Salila sababaraha taun, floats CSS geus a finicky, acan perlu, komponén di nyieun layouts ramatloka. Mun design anjeun disebut pikeun sababaraha kolom, nu tos ka floats . Masalah sareng metoda ieu nyaeta, sanajan kapinteran luar biasa nu web désainer / pamekar geus ditémbongkeun dina nyieun layouts situs kompléks, floats CSS anu pernah bener dimaksudkan pikeun dipaké dina jalan ieu.
Bari floats jeung positioning CSS anu pastikeun gaduh tempat dina rarancang web salila sababaraha taun datang, téhnik perenah anyar kaasup CSS Grid na Flexbox ayeuna mere web désainer cara anyar pikeun nyieun layouts situs maranéhanana. Sejen téhnik perenah anyar nu némbongkeun kavling poténsi téh CSS langkung Kolom.
Kolom CSS geus sabudeureun pikeun sababaraha taun ayeuna, tapi kurangna rojongan dina panyungsi heubeul (versi utamana heubeul tina Internet Explorer) geus diteundeun loba web professional ti ngagunakeun gaya ieu dina karya produksi maranéhanana.
Jeung ahir rojongan pikeun maranéhanana versi heubeul tina IE, sababaraha web désainer ayeuna experimenting kalawan pilihan perenah CSS anyar, Kolom CSS kaasup, sarta manggihan yén maranéhna kudu jadi leuwih kontrol ku ieu deukeut anyar ti maranehna kalawan floats.
The Dasar tina Kolom CSS
Sakumaha ngaranna nunjukkeun, CSS langkung Kolom (ogé katelah CSS3 perenah multi-kolom) ngidinan Anjeun pikeun dibeulah eusi kana angka set tina kolom. Paling sipat CSS dasar anu bakal anjeun make aya:
- kolom-count
- kolom-celah
Pikeun kolom-count, anjeun tangtukeun jumlah kolom rék. Celah kolom bakal gutters atanapi spasi antara maranéhanana kolom. browser bakal nyandak nilai ieu jeung dibeulah eusi merata kana Jumlah kolom nu nangtukeun.
Hiji conto umum tina CSS sababaraha kolom dina prakna bakal dibagi hiji blok eusi téks kana sababaraha kolom, sarupa jeung naon bakal nu katingali dina artikel koran. Ucapkeun anjeun boga aksara HTML handap (dicatet yén contona tujuan, Kuring keur hijina putting mimiti hiji ayat, bari dina praktekna aya kamungkinan bakal jadi sababaraha ayat tina eusi dina aksara ieu):
The judul artikel anjeun
Bayangkeun kavling ayat tina téks dieu ...
Lamun lajeng wrote gaya CSS ieu:
.content {-moz-kolom-count: 3; -webkit-kolom-count: 3; kolom-count: 3; -moz-kolom-gap: 30px; -webkit-kolom-gap: 30px; kolom-gap: 30px; }aturan CSS Ieu bakal beulah "eusi" division kana 3 kolom sarua ku gap 30 piksel antara aranjeunna. Lamun hayang dua kolom tinimbang 3, anjeun bisa kalayan gampang bakal ngarobah nilai nu na panyungsi nu bakal ngitung lebaran nu anyar tina eta kolom ka dibeulah eusi merata. Bewara nu kami nganggo pasipatan ngajual-prefixed heula, dituturkeun ku declarations non-prefixed.
Salaku gampang saperti ieu, pamakéan taun jalan ieu téh questionable pikeun pamakéan ramatloka. Sumuhun, anjeun tiasa dibeulah kebat tina eusi kana sababaraha kolom, tapi ieu bisa jadi anu pangalusna pangalaman bacaan keur Web, utamana lamun jangkungna kolom ieu ragrag di handapeun "melu" layar.
Pamiarsa lajeng bakal kudu gulung ka luhur jeung ka handap dina urutan maca eusi pinuh. Masih, anu poko tina Kolom CSS nyaeta sakumaha gampang saperti nu katingali di dieu, tur eta bisa dipake pikeun ngalakukeunana leuwih ti ngan dibeulah eusi sababaraha paragraf - eta bisa, memang, dipaké pikeun perenah.
Perenah Jeung Kolom CSS
Ucapkeun nu boga Kalurahan mibanda luas eusi nu boga 3 kolom eusi. Ieu perenah ramatloka pisan has, sarta pikeun ngahontal eta 3 kolom, anjeun normal bakal ngambang babagian anu di. Jeung CSS sababaraha-kolom, éta pisan gampang.
Di dieu nyaeta sababaraha HTML sampel:
panganyarna News
Kandungan bakal balik ka dieu ...
Ti Blog kami
Kandungan bakal balik ka dieu ...
acara
Kandungan bakal balik ka dieu ...
The CSS sangkan ieu sababaraha kolom dimimitian ku naon nempo saméméhna:
.content {-moz-kolom-count: 3; -webkit-kolom-count: 3; kolom-count: 3; -moz-kolom-gap: 30px; -webkit-kolom-gap: 30px; kolom-gap: 30px; }Ayeuna, tangtangan dieu nyaeta yen, saprak browser nu hayang pisah eusi ieu merata, jadi lamun anu panjangna eusi babagian ieu mah béda, browser anu sabenerna bakal dibeulah eusi hiji division individual, nambahkeun mimiti ka hiji kolom na lajeng neraskeun kana sejen (bisa ningali ku ngagunakeun kode ieu ngajalankeun hiji percobaan sarta nambahan panjangna rupa-rupa eusi jero unggal division)!
Nu teu naon hayang. Rék unggal divisi ieu nyieun kolom béda jeung, euweuh urusan sabaraha badag atanapi leutik eusi hiji division individu urang bisa jadi, anjeun pernah hoyong eta dibeulah. Anjeun tiasa ngahontal ku nambahkeun hiji garis tambahan ieu CSS:
.content div {tampilan: inline-block; }Ieu bakal maksakeun pamadegan bagean anu jero ti "eusi" pikeun tetep gembleng malah salaku panyungsi nu splits ieu kana sababaraha kolom. Malah leuwih hadé, saprak urang teu masihan nanaon didieu rubak tetep, kolom ieu otomatis bakal ngatur ukuran sakumaha browser nu resizes, nyieun eta hiji aplikasi idéal pikeun jaba responsif . Kalawan eta "inline-block" gaya di tempat, unggal 3 bagean anjeun bakal kolom béda tina kandungan.
Ngagunakeun Tihang-Width
Aya milik nu séjén di sagigireun "kolom-count" nu bisa Anjeun pake, sarta gumantung kana kabutuhan perenah anjeun, eta bisa jadi sabenerna mah janten pilihan hadé pikeun situs anjeun. Ieu "kolom-lebar". Ngagunakeun aksara HTML sarua ditémbongkeun saméméhna, urang gantina bisa ngalakukeun ieu jeung CSS kami:
.content {-moz-kolom-lebar: 500px; -webkit-kolom-lebar: 500px; kolom-lebar: 500px; -moz-kolom-gap: 30px; -webkit-kolom-gap: 30px; kolom-gap: 30px; } .content div {tampilan: inline-block; }Cara nu ieu jalan éta browser nu ngagunakeun ieu "kolom-lebar" salaku nilai maksimum kolom éta. Ku kituna lamun jandéla browser is kirang ti 500 piksel lega, 3 bagean ieu bakal muncul dina kolom tunggal, salah sahiji tops of sejen. Ieu perenah has dipaké pikeun layouts layar mobile / leutik.
Salaku lebar browser naek janten cukup badag pikeun nyocogkeun 2 kolom sapanjang kalawan sela kolom dieusian, browser anu otomatis bakal balik ti perenah kolom single ka dua kolom. Tetep ngaronjatna lebar layar sarta ahirna, anjeun bakal meunang desain 3 kolom, kalawan unggal 3 bagean urang ditingal dina kolom sorangan. Deui, ieu téh cara gede meunang sababaraha responsif, multi-alat ramah layouts, sarta anjeun malah teu kedah nganggo queries média pikeun ngarobah gaya perenah!
Pasipatan Tihang séjén
Salian sipat katutupan di dieu, aya ogé sipat keur "kolom-aturan", kaasup nilai warna, gaya, sarta lebar nu ngidinan Anjeun pikeun nyieun aturan antara kolom Anjeun. Ieu bakal dipake tinimbang wates lamun hoyong gaduh sababaraha garis misahkeun kolom Anjeun.
Waktu keur percobaan
Ayeuna, CSS langkung Layout Tihang geus kacida alusna didukung. Kalawan émbohan, leuwih 94% tina pamaké web bakal bisa ningali gaya ieu, sarta yén grup unsupported bakal bener euy jadi versi jauh leuwih kolot ti Internet Explorer nu teu meunang ngarojong deui baé.
Kalawan tingkat ieu rojongan ayeuna di tempat, taya alesan teu dimimitian experimenting kalawan Kolom CSS jeung deploying gaya ieu dina situs web produksi siap. Anjeun bisa ngamimitian percobaan anjeun ngagunakeun HTML jeung CSS dibere dina artikel ieu sareng maénkeun sabudeureun kalayan nilai béda ningali naon anu dianggo pangalusna pikeun kaperluan perenah situs anjeun.