តើធ្វើដូចម្តេចដើម្បីអណ្តែតរូបភាពទៅឆ្វេងនៃអត្ថបទនៅលើទំព័របណ្តាញមួយ

ប្រើ CSS ដើម្បីតម្រឹមរូបភាពទៅផ្នែកខាងឆ្វេងនៃប្លង់គេហទំព័រ

មើលទំព័របណ្ដាញស្ទើរតែទាំងអស់នៅថ្ងៃនេះហើយអ្នកនឹងឃើញការបញ្ចូលគ្នានៃអត្ថបទនិងរូបភាពដែលជាទំព័រភាគច្រើននៃទំព័រទាំងនោះ។ វាងាយស្រួលណាស់ក្នុងការបន្ថែមអត្ថបទនិង រូបភាពទៅទំព័រមួយ ។ អត្ថបទត្រូវបានដាក់កូដដោយប្រើ ស្លាក HTML ស្តង់ដារដូចកថាខណ្ឌបញ្ជីនិងចំណងជើងខណៈពេលដែលរូបភាពត្រូវបានរួមបញ្ចូលដោយប្រើធាតុ ។

សមត្ថភាពក្នុងការធ្វើឱ្យអត្ថបទនោះនិងរូបភាពទាំងនោះដំណើរការបានយ៉ាងល្អជាមួយគ្នាគឺជាអ្វីដែលបង្កើតអ្នករចនាគេហទំព័រដ៏អស្ចារ្យ! អ្នកមិនគ្រាន់តែចង់ឱ្យអត្ថបទនិងរូបភាពរបស់អ្នកលេចឡើងម្តងមួយៗនោះទេដែលជា ធាតុកម្រិតប្លុក ទាំងនេះនឹងត្រូវរៀបចំតាមលំនាំដើម។ ទេអ្នកចង់គ្រប់គ្រងលើរបៀបដែលអត្ថបទនិងរូបភាពហូរចូលគ្នាជាមួយគ្នានៅក្នុងអ្វីដែលចុងក្រោយនឹងក្លាយជាការរចនាដែលអាចមើលឃើញតាមគេហទំព័ររបស់អ្នក។

ការមានរូបភាពដែលត្រូវបានតម្រឹមទៅផ្នែកខាងឆ្វេងនៃទំព័រខណៈពេលដែល អត្ថបទនៃទំព័រនោះហូរនៅជុំវិញវា ជាការរចនារចនាជាទូទៅសម្រាប់ការរចនាបោះពុម្ពនិងសម្រាប់គេហទំព័រផងដែរ។ នៅក្នុងពាក្យបណ្តាញ, ផលប៉ះពាល់នេះត្រូវបានគេស្គាល់ថាជា អណ្តែត រូបភាព ។ រចនាប័ទ្មនេះត្រូវបានសម្រេចដោយ លក្ខណៈសម្បត្តិ CSS សម្រាប់ "float" ។ លក្ខណសម្បត្តិនេះអនុញ្ញាតឱ្យអត្ថបទហូរនៅជុំវិញរូបភាពឆ្វេងតម្រឹមទៅផ្នែកខាងស្តាំរបស់វា។ (ឬនៅជុំវិញរូបភាពស្តាំតម្រឹមទៅផ្នែកខាងឆ្វេងរបស់វា។ ) សូមពិនិត្យមើលរបៀបដើម្បីសម្រេចបាននូវប្រសិទ្ធិភាពមើលឃើញនេះ។

ចាប់ផ្ដើមជាមួយ HTML

រឿងដំបូងដែលអ្នកត្រូវធ្វើគឺមាន HTML ខ្លះធ្វើការជាមួយ។ ឧទាហរណ៍របស់យើងយើងនឹងសរសេរកថាខណ្ឌនៃអត្ថបទហើយបន្ថែមរូបភាពនៅដើមកថាខណ្ឌ (មុនអត្ថបទប៉ុន្តែបន្ទាប់ពីបើក

tag) ។ នេះគឺជាអ្វីដែលការសម្គាល់ HTML មានរូបរាងដូចខាងក្រោម:

អត្ថបទនៃកថាខណ្ឌទៅទីនេះ។ នៅក្នុងឧទាហរណ៍នេះយើងមានរូបភាពរូបថតក្បាលសត្វមួយដូច្នេះអត្ថបទនេះទំនងជានិយាយពីមនុស្សដែលរូបចម្លាក់គឺសម្រាប់។

តាមលំនាំដើមគេហទំព័ររបស់យើងនឹងបង្ហាញជាមួយរូបភាពខាងលើអត្ថបទ។ នេះគឺដោយសារតែរូបភាពគឺជាធាតុកម្រិតប្លុកនៅក្នុង HTML ។ នេះមានន័យថាកម្មវិធីរុករកបង្ហាញការចុះបន្ទាត់មុននិងក្រោយធាតុរូបភាពតាមលំនាំដើម។ យើងនឹងផ្លាស់ប្ដូររូបរាងលំនាំដើមនេះដោយងាកទៅ CSS ។ ដំបូងយើងនឹងបន្ថែម តម្លៃថ្នាក់ទៅធាតុរូបភាពរបស់យើង ។ ថ្នាក់នោះនឹងដើរតួជា "ទំពក់" ដែលយើងនឹងប្រើក្នុង CSS របស់យើងនៅពេលក្រោយ។

អត្ថបទនៃកថាខណ្ឌទៅទីនេះ។ នៅក្នុងឧទាហរណ៍នេះយើងមានរូបភាពរូបថតក្បាលសត្វមួយដូច្នេះអត្ថបទនេះទំនងជានិយាយពីមនុស្សដែលរូបចម្លាក់គឺសម្រាប់។

សូមកត់សម្គាល់ថា "ថ្នាក់ក្រោម" នេះមិនធ្វើអ្វីដោយខ្លួនឯងទេ! សម្រាប់ពួកយើងដើម្បីសម្រេចបាននូវរចនាប័ទ្មដែលចង់បានរបស់យើងយើងត្រូវប្រើ CSS នៅបន្ទាប់។

រចនាប័ទ្ម CSS

ជាមួយនឹង HTML របស់យើងដែលរួមមានគុណលក្ខណៈថ្នាក់របស់យើងនៃ "ឆ្វេង" យើងអាចប្តូរទៅកាន់ CSS ។ យើងនឹងបន្ថែមក្បួនទៅ សន្លឹករចនាប័ទ្ម របស់យើងដែលនឹងអណ្តែតរូបភាពនោះហើយបន្ថែមចន្លោះតិចតួចនៅជាប់វាដូច្នេះអត្ថបទដែលនឹងរុំជុំវិញរូបភាពនឹងមិនបិទជាមួយវាយ៉ាងជិតស្និទ្ធ។ នេះជា CSS អ្នកអាចសរសេរ:

។ ឆ្វេង {អណ្ដែត: ឆ្វេង; ចន្លោះ: 0 20px 20px 0; }

រចនាប័ទ្មនេះអណ្ដែតរូបភាពនោះទៅខាងឆ្វេងហើយបន្ថែម ចន្លោះ តូចៗ (ដោយប្រើ CSS អក្សរកាត់ខ្លះ) ទៅខាងស្តាំនិងបាតនៃរូបភាព។

ប្រសិនបើអ្នកពិនិត្យមើលទំព័រដែលមាន HTML នេះនៅក្នុងកម្មវិធីរុករករូបភាពនឹងត្រូវបានតម្រឹមទៅខាងឆ្វេងហើយអត្ថបទនៃកថាខណ្ឌនឹងលេចឡើងនៅខាងស្ដាំរបស់វាជាមួយនឹងចំនួនគម្លាតសមស្របរវាងអ្នកទាំងពីរ។ ចំណាំតម្លៃថ្នាក់នៃ "ឆ្វេង" ដែលយើងបានប្រើគឺបំពាន។ យើងអាចហៅវាបានព្រោះពាក្យថា "ទុកចោល" មិនធ្វើអ្វីដោយខ្លួនឯងទេ។ នេះត្រូវការឱ្យមាន គុណលក្ខណៈថ្នាក់នៅក្នុង HTML ដែលធ្វើការជាមួយរចនាប័ទ្ម CSS ពិតប្រាកដដែលកំណត់ការផ្លាស់ប្តូរដែលអ្នកកំពុងស្វែងរក។

វិធីជម្មើសជំនួសដើម្បីសម្រេចបានរចនាប័ទ្មទាំងនេះ

វិធីសាស្រ្តនៃការផ្តល់ធាតុរូបភាពគុណលក្ខណៈថ្នាក់ហើយបន្ទាប់មកប្រើរចនាប័ទ្ម CSS ទូទៅដែលអណ្ដែតធាតុគឺគ្រាន់តែជាមធ្យោបាយមួយដែលអ្នកអាចសម្រេចបានរូបរាង "រូបភាពតម្រឹមឆ្វេងនេះ" ។ អ្នកក៏អាចយកតម្លៃថ្នាក់ចេញនៃរូបភាពនិងរចនាប័ទ្មវាជាមួយ CSS ដោយសរសេរអ្នកជ្រើសរើសជាក់លាក់បន្ថែមទៀត។ ឧទាហរណ៍សូមមើលឧទាហរណ៍មួយដែលរូបភាពនោះស្ថិតនៅផ្នែកនៃផ្នែកដែលមានតម្លៃថ្នាក់នៃ "មាតិកាមេ" ។

អត្ថបទនៃកថាខណ្ឌទៅនៅទីនេះ។ នៅក្នុងឧទាហរណ៍នេះយើងមានរូបភាពរូបថតក្បាលសត្វមួយដូច្នេះអត្ថបទនេះទំនងជានិយាយពីមនុស្សដែលរូបចម្លាក់គឺសម្រាប់។

ដើម្បីរចនារូបភាពនេះអ្នកអាចសរសេរ CSS នេះ:

.main-content img {float: left; ចន្លោះ: 0 20px 20px 0; }

នៅក្នុង sceario នេះរូបភាពរបស់យើងនឹងត្រូវបានតម្រឹមទៅឆ្វេងដែលអត្ថបទអណ្តែតនៅជុំវិញវាដូចកាលពីមុនប៉ុន្តែយើងមិនចាំបាច់បន្ថែមតម្លៃថ្នាក់បន្ថែមទៅការសម្គាល់របស់យើងទេ។ ការធ្វើបែបនេះក្នុងមាត្រដ្ឋានអាចជួយបង្កើតឯកសារ HTML ដែលមានទំហំតូចជាងមុនដែលនឹងងាយស្រួលក្នុងការគ្រប់គ្រងនិងអាចជួយបង្កើនសមត្ថភាព។

ជាចុងក្រោយអ្នកអាចបន្ថែមរចនាប័ទ្មដោយផ្ទាល់ទៅក្នុងការសម្គាល់ HTML របស់អ្នកដូចនេះ:

អត្ថបទនៃកថាខណ្ឌទៅទីនេះ។ នៅក្នុងឧទាហរណ៍នេះយើងមានរូបភាពរូបថតក្បាលសត្វមួយដូច្នេះអត្ថបទនេះទំនងជានិយាយពីមនុស្សដែលរូបចម្លាក់គឺសម្រាប់។

វិធីសាស្រ្តនេះត្រូវបានគេហៅថា " រចនាប័ទ្មក្នុងតួ " ។ វាមិនត្រូវបានណែនាំទេពីព្រោះវារួមបញ្ចូលគ្នាយ៉ាងច្បាស់នូវរចនាសម័្ពន្ធនៃធាតុមួយជាមួយនឹងការកំណត់រចនាសម្ព័ន្ធរបស់វា។ ការអនុវត្តតាមអ៊ិនធឺរណែតកំណត់ថារចនាប័ទ្មនិងរចនាសម្ព័ន្ធនៃទំព័រគួរស្ថិតនៅដាច់ដោយឡែក។ នេះមានប្រយោជន៍ជាពិសេសនៅពេលដែលទំព័ររបស់អ្នកត្រូវការ ផ្លាស់ប្តូរប្លង់របស់ខ្លួននិងស្វែងរកទំហំអេក្រង់ផ្សេងគ្នានិងឧបករណ៍ ដែលមានគេហទំព័រឆ្លើយតប។ ការមានរចនាប័ទ្មនៃទំព័រដែលជាប់គ្នានៅក្នុង HTML នឹងធ្វើអោយពិបាកក្នុងការ សរសេរសំណួររបស់អ្នកសារព័ត៌មាន ដែលនឹងកែតម្រូវរូបភាពគេហទំព័ររបស់អ្នកតាមតម្រូវការសម្រាប់អេក្រង់ផ្សេងៗ។

អត្ថបទដើមរបស់នាង Jennifer Krynin ។ កែសម្រួលដោយលោក Jeremy Girard នៅថ្ងៃទី 4 ខែមេសាឆ្នាំ 2012 ។