ស្វែងយល់អំពី CSS Float

Words
69
Reading
1 min
Listen
Play
9y

css-float.jpg

Css float ជាលក្ខណៈសម្បត្តិទីតាំងរបស់ CSS, វាត្រូវបានកំណត់ប្រសិនបើធាតុរបស់ HTML នឹងត្រូវបានអណ្តែត (float) ឬអត់។

Css Syntax

float: none|left|right|initial|inherit;

អ្នកអាចប្រើតម្លៃទាំង ៥ នេះសំរាប់លក្ខណៈសម្បត្តិ float។

none – ធាតុនេះមិនត្រូវបានអណ្តែត (float) ហើយនឹងត្រូវបានបង្ហាញនៅកន្លែងដែលវាកើតឡើងនៅក្នុងអត្ថបទប៉ុណ្ណោះ នេះជាលំនាំដើម

  • left – ធាតុអណ្តែត (float) ទៅខាងឆ្វេង
  • right – ធាតុអណ្តែត (float) ទៅខាងស្តាំ
  • initial – កំណត់លក្ខណៈសម្បត្តិទៅតម្លៃលំនាំដើម
  • inherit – ទទួលលក្ខណៈសម្បត្តិពីធាតុមេ

ឧទាហរណ៍ខាងក្រោមខ្ញុំនឹងលើកយករូបភាព (img) និងអត្ថបទ (p) មកបង្ហាញជាមួយនិង CSS Float។

none

សូមសរសេរកូដដូចខាងក្រោម៖

css-float1.png

នោះនឹងបង្ហាញលទ្ធផលដូចខាងក្រោម៖

css-float2.png

left

សូមសរសេរកូដដូចខាងក្រោម៖

css-float3.png

នោះនឹងបង្ហាញលទ្ធផលដូចខាងក្រោម៖

css-float4.png

right

សូមសរសេរកូដដូចខាងក្រោម៖

css-float5.png

នោះនឹងបង្ហាញលទ្ធផលដូចខាងក្រោម៖

css-float6.png

ចំពោះ #initial និង #inherit គឺមានលក្ខណៈស្រដៀងទៅនឹង #none ដែរដោយគ្រាន់តែយើងធ្វើការផ្លាស់ប្តូរតម្លៃលក្ខណៈសម្បត្តិនៃ CSS Float នៅក្នុងឯកសារ CSS របស់អ្នកតែប៉ុណ្ណោះ។ សូមមើលឧទាហរណ៍ខាងក្រោម៖

initial

css-float7.png

inherit

css-float8.png

ប្រភពដើម