CSS ရှိ float ဂုဏ်သတ္တိအား မိတ်ဆက်ခြင်း

ရှည်လျားသော စာသားတစ်ခုပါသည့် div တစ်ခုရှိသည်ဆိုပါစို့။ ထိုစာသား၏ အစတွင် ရုပ်ပုံတစ်ပုံထည့်ကြည့်ရအောင်။

html<div>
  <img src="img.png" alt="">
  some long text
</div>

cssdiv {
  width: 400px;
  text-align: justify;
}

Результат:

မြင်တွေ့ရသည့်အတိုင်း ရုပ်ပုံ၏အောက်ခြေသည် စာသား၏ ပထမစာကြောင်းပေါ်တွင် တည်ရှိပြီး ကျန်အပိုင်းများသည် အပေါ်ဘက်သို့ ထွက်သွားသည်။ ရုပ်ပုံ၏ ညာဘက်တွင် ကြီးမားသော ဗလာနေရာတစ်ခု ဖြစ်ပေါ်နေသည်။ စာသားသည် ထိုဗလာနေရာကို ဖြည့်စွက်စေရန် လုပ်ကြည့်ကြပါစို့။ ဤအတွက် ရုပ်ပုံကို float ဂုဏ်သတ္တိ left တန်ဖိုးဖြင့် သတ်မှတ်ပေးပါမည်။

html<div>
  <img src="img.png" alt="">
  some long text
</div>

cssdiv {
  width: 400px;
  text-align: justify;
}
img {
  float: left;
}

Результат:

ဒီတော့ အခု ရုပ်ပုံသည် ဘယ်ဘက်တွင် မျောနေပြီး စာသားသည် ၎င်းကို ညာဘက်မှ ဝန်းရံနေသည်။ ဤသို့ဖြင့် ရုပ်ပုံဘေးရှိ ဗလာနေရာ ပျောက်ကွယ်သွားသည်။

ရုပ်ပုံအား ဘယ်ဘက်တွင် မဟုတ်ဘဲ ညာဘက်တွင် မျောစေရန် လည်း လုပ်နိုင်သည်။ ဤအတွက် float ကို right တန်ဖိုးသို့ ပြောင်းသတ်မှတ်ပါ။

html<div>
  <img src="img.png" alt="">
  some long text
</div>

cssdiv {
  width: 400px;
  text-align: justify;
}
img {
  float: right;
}

Результат: