CSS တွင် တဂ်များအောက်ရှိ မျောနေသော အစိတ်အပိုင်းများ

ယခု ကျွန်ုပ်တို့တွင် စာပိုဒ်နှစ်ပိုဒ်နှင့် ပထမစာပိုဒ်အတွင်းတွင် ထားရှိထားသော ရုပ်ပုံတစ်ပုံ ရှိသည်ဆိုပါစို့။ ဤရုပ်ပုံအတွက် ကျွန်ုပ်တို့သည် float ဂုဏ်သတ္တိကို right တန်ဖိုးဖြင့် သတ်မှတ်ပေးထားပြီး ဖန်သားပြင်ပေါ်တွင် ရှိသောအရာ၏ အလင်းဖောက်ဝင်နိုင်မှု (opacity) ကိုလည်း သတ်မှတ်ပေးထားပါသည်။

html<div>
  <p>
    <img src="img.png" alt="">
    Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
  </p>
  <p>
    some long text
  </p>
</div>

cssdiv {
  border: 1px solid red;
  text-align: justify;
}
p {
  border: 1px solid green;
}
img {
  float: right;
  opacity: 0.5;
}

Результат:

ယခု ကျွန်ုပ်တို့သည် HTML ကုဒ်တွင် ရုပ်ပုံကို ပထမစာပိုဒ်နောက်တွင် ထားပြီး ဘာဖြစ်လာမလဲဆိုတာ ကြည့်ကြပါစို့။

html<div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
  </p>
  <img src="img.png" alt="">
  <p>
    some long text
  </p>
</div>

cssdiv {
  border: 1px solid red;
  text-align: justify;
}
p {
  border: 1px solid green;
}
img {
  float: right;
  opacity: 0.5;
}

Результат:

ကျွန်ုပ်တို့မြင်တွေ့ရသည့်အတိုင်း ရုပ်ပုံကို ဒုတိယစာပိုဒ်၏ စာသားများက ဝန်းရံသွားပြီး ပထမစာပိုဒ်ကမူ မဝန်းရံပါ။

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

html<div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
  </p>
  <p>
    some long text
  </p>
  <img src="img.png" alt="">
</div>

cssdiv {
  border: 1px solid red;
  text-align: justify;
}
p {
  border: 1px solid green;
}
img {
  float: right;
  opacity: 0.5;
}

Результат:

ဆိုလိုသည်မှာ ရုပ်ပုံကို ၎င်း၏အောက်တွင် တည်ရှိသော အစိတ်အပိုင်းများကသာ ဝန်းရံမည်ဖြစ်ပြီး ၎င်း၏အပေါ်တွင် တည်ရှိသော အစိတ်အပိုင်းများကမူ ဝန်းရံမည်မဟုတ်ပါ။