អស់រយៈពេលជាច្រើនឆ្នាំ CSS Floats បានក្លាយជាសមាសធាតុមួយដែលចាំបាច់ប៉ុន្តែចាំបាច់នៅក្នុងការបង្កើតប្លង់គេហទំព័រ។ ប្រសិនបើការរចនារបស់អ្នកបានហៅជួរឈរច្រើន អ្នកបែរទៅជាអណ្ដែត ។ បញ្ហាជាមួយវិធីសាស្រ្តនេះគឺថាបើទោះបីជាអ្នកច្នៃប្រឌិតវិបសាយ / អ្នកអភិវឌ្ឍន៍គេហទំព័របានបង្ហាញក្នុងការបង្កើតប្លង់វែបសាយស្មុគ្រស្មាញក៏ដោយក៏អណ្តែតរបស់ CSS មិនដែលត្រូវបានប្រើក្នុងវិធីនេះទេ។
ខណៈពេលដែលទីតាំងអណ្តែតនិងទីតាំង CSS ប្រាកដណាស់នឹងមានកន្លែងសម្រាប់ការរចនាលើគេហទំព័រជាច្រើនឆ្នាំខាងមុខបច្ចេកទេសប្លង់ថ្មីរួមទាំង CSS Grid និង Flexbox ឥឡូវនេះបានផ្តល់ឱ្យអ្នករចនាគេហទំព័រវិធីថ្មីៗដើម្បីបង្កើតប្លង់វែបសាយរបស់ពួកគេ។ បច្ចេកទេសប្លង់ថ្មីមួយផ្សេងទៀតដែលបង្ហាញសក្តានុពលជាច្រើនគឺ CSS Columns ច្រើន។
CSS Columns មានរយៈពេលប្រហែល 2 ឬ 3 ឆ្នាំហើយប៉ុន្តែការខ្វះការគាំទ្រក្នុងកម្មវិធីរុករកចាស់ៗ (ជាទូទៅកំណែចាស់របស់កម្មវិធី Internet Explorer) បានរក្សាទុកអ្នកជំនាញគេហទំព័រជាច្រើនពីការប្រើរចនាប័ទ្មទាំងនេះនៅក្នុងការងារផលិតរបស់ពួកគេ។
ជាមួយនឹងការបញ្ចប់នៃការគាំទ្រកំណែ IE ចាស់ជាងនេះអ្នករចនាគេហទំព័រមួយចំនួនឥឡូវនេះកំពុងសាកល្បងជាមួយជម្រើស CSS layout ថ្មីរួមទាំង CSS Columns និងការស្វែងរកថាពួកគេមានការគ្រប់គ្រងច្រើនណាស់ជាមួយវិធីសាស្រ្តថ្មីទាំងនេះជាងអ្វីដែលពួកគេបានធ្វើ។
មូលដ្ឋានគ្រឹះនៃ CSS Columns
ដូចដែលឈ្មោះរបស់វាបានបង្ហាញ CSS Columns ជាច្រើន (ដែលត្រូវបានគេស្គាល់ផងដែរថាជាប្លង់ជួរឈរ CSS3) អនុញ្ញាតឱ្យអ្នកបំបែកមាតិកាចូលទៅក្នុងចំនួនជួរឈរដែលបានកំណត់។ លក្ខណសម្បត្តិ CSS មូលដ្ឋានភាគច្រើនដែលអ្នកនឹងប្រើគឺ:
- រាប់ជួរឈរ
- ជួរឈរគម្លាត
សម្រាប់ចំនួនជួរឈរអ្នកបញ្ជាក់ចំនួនខ្ទង់ដែលអ្នកចង់បាន។ គម្លាតជួរឈរអាចជាទឹកទន្លេឬគម្លាតរវាងជួរឈរទាំងនោះ។ កម្មវិធីរុករកនឹងយកតម្លៃទាំងនេះហើយបំបែកមាតិកាស្មើៗគ្នាទៅក្នុងចំនួនជួរឈរដែលអ្នកបញ្ជាក់។
ឧទាហរណ៏សាមញ្ញនៃ CSS columns ជាច្រើននៅក្នុងការអនុវត្តគឺដើម្បីបំបែកប្លុកមាតិកាអត្ថបទទៅជាជួរឈរច្រើនស្រដៀងនឹងអ្វីដែលអ្នកនឹងឃើញនៅក្នុងអត្ថបទកាសែត។ និយាយថាអ្នកមានចំណុចសម្គាល់ HTML ដូចខាងក្រោម (ចំណាំថាឧទាហរណ៍គោលបំណងខ្ញុំគ្រាន់តែដាក់កថាខណ្ឌមួយប៉ុណ្ណោះហើយក្នុងការអនុវត្តវាទំនងជាមានកថាខណ្ឌច្រើននៅក្នុងមាតិកានេះ):
ក្បាលអត្ថបទរបស់អ្នក
ស្រមៃគិតច្រើនកថាខណ្ឌនៃអត្ថបទទីនេះ ...
ប្រសិនបើអ្នកសរសេររចនាប័ទ្ម CSS ទាំងនេះ:
.content {-moz-column-count: 3; -webkit-column-count: 3; ចំនួនជួរឈរ: 3; -moz-column-gap: 30px; -webkit-column-gap: 30px; ជួរឈរ - ចន្លោះ: 30px; }ក្បួន CSS នេះនឹងបំបែកផ្នែក "មាតិកា" ទៅជា 3 ជួរឈរស្មើៗគ្នាជាមួយគម្លាត 30 ភីចសែលរវាងពួកវា។ ប្រសិនបើអ្នកចង់បានជួរឈរពីរជំនួសឱ្យ 3 អ្នកគ្រាន់តែផ្លាស់ប្ដូរតម្លៃនោះហើយ browser នឹងគណនាទទឹងថ្មីនៃជួរឈរទាំងនោះដើម្បីបំបែកមាតិការាបស្មើ។ សូមកត់សម្គាល់ថាយើងប្រើអ្នកលក់ - បុព្វបទដែលមានជាមុនបន្ទាប់មកមានការប្រកាសដែលមិនមែនជាបុព្វបទ។
ក្នុងនាមងាយស្រួលដូចនេះការប្រើប្រាស់របស់វាក្នុងវិធីនេះគឺមានចម្ងល់ចំពោះការប្រើប្រាស់គេហទំព័រ។ បាទ / ចាសអ្នកអាចបំបែក bunch នៃមាតិកាទៅក្នុងជួរឈរច្រើនប៉ុន្តែវាអាចមិនមែនជាបទពិសោធន៏អានល្អបំផុតសំរាប់គេហទំព័រជាពិសេសប្រសិនបើកម្ពស់ជួរឈរទាំងនេះធ្លាក់ចុះក្រោម "អេក្រង់" ។
បន្ទាប់មកអ្នកអាននឹងត្រូវរមូរឡើងលើចុះក្រោមដើម្បីអានមាតិកាពេញលេញ។ ទោះយ៉ាងណាចំនុចសំខាន់នៃ CSS Columns មានភាពងាយស្រួលដូចដែលអ្នកបានឃើញនៅទីនេះហើយវាអាចត្រូវបានប្រើដើម្បីធ្វើឱ្យច្រើនជាងនេះទៅទៀតដើម្បីបំបែកមាតិកានៃកថាខណ្ឌមួយចំនួន។ វាអាចត្រូវបានប្រើសម្រាប់ប្លង់។
ប្លង់ដោយប្រើ CSS Columns
និយាយថាអ្នកមានទំព័រវ៉េបដែលមានមាតិកាតំបន់ដែលមាន 3 ជួរឈរនៃមាតិកា។ នេះគឺជាប្លង់វេបសាយធម្មតាហើយដើម្បីសម្រេចបាននូវជួរឈរទាំង 3 នោះអ្នកនឹងទម្លាក់ការបែងចែកដែលស្ថិតនៅ។ ជាមួយ CSS ច្រើនជួរវាងាយស្រួលជាង។
នេះគឺជាគំរូ HTML ខ្លះ:
មាតិកានឹងមកទីនេះ ...ព័ត៌មានថ្មីបំផុត
> ពីប្លុករបស់យើង
មាតិកានឹងមកដល់ទីនេះ ...
ព្រឹត្តិការណ៍ជិតមកដល់
មាតិកានឹងមកដល់ទីនេះ ... p>
CSS ដើម្បីធ្វើឱ្យជួរឈរច្រើនទាំងនេះចាប់ផ្តើមពីអ្វីដែលអ្នកបានឃើញពីមុន:
.content {-moz-column-count: 3; -webkit-column-count: 3; ចំនួនជួរឈរ: 3; -moz-column-gap: 30px; -webkit-column-gap: 30px; ជួរឈរ - ចន្លោះ: 30px; }ឥឡូវនេះបញ្ហាប្រឈមនៅទីនេះគឺដោយសារតែកម្មវិធីរុករកចង់បំបែកមាតិការាបស្មើដូច្នេះប្រសិនបើប្រវែងមាតិកានៃការបែងចែកទាំងនេះខុសគ្នាកម្មវិធីរុករកនោះនឹងបំបែកមាតិកានៃផ្នែកនីមួយៗដោយបន្ថែមការចាប់ផ្តើមនៃវាទៅជួរឈរមួយនិង បន្ទាប់មកបន្តទៅជាមួយទៀត (អ្នកអាចមើលឃើញនេះដោយប្រើកូដនេះដើម្បីដំណើរការពិសោធន៍និងបន្ថែមប្រវែងមាតិកាផ្សេងគ្នានៅក្នុងផ្នែកនីមួយៗ)!
នោះមិនមែនជាអ្វីដែលអ្នកចង់បាននោះទេ។ អ្នកចង់ឱ្យការបែងចែកនីមួយៗបង្កើតជួរឈរខុសគ្នានិងមិនថាមាតិកាធំ ៗ របស់ផ្នែកបុគ្គលឬតូចអាចមានអ្វីទេអ្នកមិនចង់ឱ្យវាបំបែក។ អ្នកអាចសម្រេចបាននេះដោយបន្ថែមបន្ទាត់បន្ថែមមួយរបស់ CSS:
.content div {display: inline-block; }នេះនឹងបង្ខំឱ្យបែកខ្ញែកទាំងនោះនៅខាងក្នុងនៃ "មាតិកា" នៅតែមានដដែលសូម្បីតែកម្មវិធីរុករកបែងចែកវាទៅជាជួរឈរច្រើនក៏ដោយ។ សូម្បីតែប្រសើរជាងនេះដោយសារតែយើងមិនបានផ្តល់អ្វីនៅទីនេះទទឹងថេរកូឡោនទាំងនេះនឹងប្តូរទំហំដោយស្វ័យប្រវត្តិនៅពេលដែលកម្មវិធីរុករកមានទំហំតូចដែលធ្វើឱ្យវាក្លាយជាកម្មវិធីដ៏ល្អសម្រាប់ គេហទំព័រឆ្លើយតប ។ ជាមួយនឹងរចនាប័ទ្ម "ប្លុកអ៊ិនធឺរ" នៅក្នុងកន្លែងនីមួយៗនៃការបែងចែក 3 របស់អ្នកនឹងក្លាយជាជួរនៃមាតិកា។
ប្រើ Column-Width
មានលក្ខណសម្បត្តិផ្សេងទៀតក្រៅពី "ចំនួនជួរឈរ" ដែលអ្នកអាចប្រើនិងអាស្រ័យលើតំរូវការប្លង់របស់អ្នកវាអាចជាជម្រើសប្រសើរជាងសម្រាប់គេហទំព័ររបស់អ្នក។ នេះគឺ "ទទឹងជួរឈរ" ។ ដោយប្រើ HTML markup ដូចគ្នាដូចដែលបានបង្ហាញពីមុនយើងអាចធ្វើការនេះជាមួយ CSS របស់យើង:
.content {-moz-column width: 500px; -webkit-column width: 500px; ទទឹងជួរឈរ: 500px; -moz-column-gap: 30px; -webkit-column-gap: 30px; ជួរឈរ - ចន្លោះ: 30px; } .content div {display: inline-block; }វិធីដែលដំណើរការនេះគឺថាកម្មវិធីរុករកប្រើ "ទទឹងជួរឈរ" នេះជាតម្លៃអតិបរមានៃជួរឈរនោះ។ ដូច្នេះប្រសិនបើបង្អួចកម្មវិធីរុករកមានទទឹងតិចជាង 500 ភីចសែលទាំងបីនេះនឹងបង្ហាញនៅក្នុងជួរឈរតែមួយនៃកំពូលរបស់មួយផ្សេងទៀត។ នេះជាប្លង់ធម្មតាដែលប្រើសម្រាប់ប្លង់អេក្រង់ចល័ត / តូច។
ខណៈដែលទទឹងរបស់កម្មវិធីរុករកកើនឡើងដល់ធំគ្រប់គ្រាន់ដើម្បីឱ្យសមទៅនឹង 2 ជួរឈររួមជាមួយគម្លាតជួរឈរដែលបានបញ្ជាក់កម្មវិធីរុករកនឹងប្តូរពីប្លង់ជួរឈរតែមួយទៅជួរឈរពីរដោយស្វ័យប្រវត្តិ។ រក្សាការបង្កើនទំហំអេក្រង់ហើយនៅទីបំផុតអ្នកនឹងទទួលបានការរចនាជួរឈរ 3 ដោយផ្នែកនីមួយៗរបស់យើងនីមួយៗត្រូវបានបង្ហាញនៅក្នុងជួរឈរផ្ទាល់ខ្លួនរបស់ពួកគេ។ ជាថ្មីម្តងទៀតនេះគឺជាវិធីដ៏ល្អមួយដើម្បីទទួលបានប្លង់ឆ្លើយតប ងាយៗ ជាច្រើននិងអ្នកមិនចាំបាច់ប្រើ សំណួរប្រព័ន្ធផ្សព្វផ្សាយ ដើម្បីប្តូររចនាប័ទ្មប្លង់!
លក្ខណសម្បត្តិជួរឈរផ្សេងទៀត
បន្ថែមលើលក្ខណសម្បត្តិដែលបានគ្របដណ្តប់នៅទីនេះក៏មានលក្ខណសម្បត្តិផងដែរសម្រាប់ "ជួរឈរ" រួមទាំងពណ៌រចនាប័ទ្មនិងតម្លៃទទឹងដែលអនុញ្ញាតឱ្យអ្នកបង្កើតច្បាប់រវាងជួរឈររបស់អ្នក។ ទាំងនេះនឹងត្រូវបានប្រើជំនួសស៊ុមបើអ្នកចង់ឱ្យមានបន្ទាត់មួយចំនួនដែលបំបែកជួរឈររបស់អ្នក។
ពេលវេលាដើម្បីសាកល្បង
បច្ចុប្បន្នប្លង់ CSS ច្រើនត្រូវបានគាំទ្រយ៉ាងល្អ។ ជាមួយបុព្វបទជាង 94% នៃអ្នកប្រើប្រាស់បណ្តាញអាចមើលឃើញរចនាប័ទ្មទាំងនេះហើយថាក្រុមដែលមិនគាំទ្រនឹងពិតជាកំណែចាស់ៗនៃកម្មវិធី Internet Explorer ដែលអ្នកប្រហែលជាមិនត្រូវបានគាំទ្រទៀតទេ។
ជាមួយនឹងកម្រិតនៃការគាំទ្រនេះឥឡូវនេះមិនមានហេតុផលមិនត្រូវចាប់ផ្តើមពិសោធជាមួយ CSS Columns និងការដាក់ពង្រាយរចនាប័ទ្មទាំងនេះនៅក្នុងវេបសាយដែលបានផលិតរួច។ អ្នកអាចចាប់ផ្តើមពិសោធន៍របស់អ្នកដោយប្រើ HTML និង CSS ដែលបានបង្ហាញនៅក្នុងអត្ថបទនេះនិងលេងជុំវិញដោយតម្លៃខុសៗគ្នាដើម្បីមើលថាតើអ្វីដែលនឹងមានប្រសិទ្ធភាពបំផុតសម្រាប់តំរូវការប្លង់គេហទំព័ររបស់អ្នក។