CSS တွင် floats ၏မိဘအတွင်းရှိ စာသား

Div အတွက် height property ကို ဖယ်ရှားပြီး ပုံရုပ်ရှေ့တွင် စာသားအနည်းငယ် ထည့်ကြည့်ပါ။

ဤကိစ္စတွင် ကျွန်ုပ်တို့၏ div ၏အမြင့်သည် စာသား၏အမြင့်နှင့် ညီမျှမည်ဖြစ်ပြီး ပုံရုပ်သည် div ကို ကျော်လွန်နေဆဲဖြစ်သည်။

html<div>
  စာသား
  <img src="img.png" alt="">
</div>

cssdiv {
  border: 1px solid red;
}
img {
  float: right;
}

Результат:

ပုံရုပ်နောက်တွင် စာသားထားကြည့်ပါ - ရလဒ်သည် မပြောင်းလဲပါ။

html<div>
  <img src="img.png" alt="">
  စာသား
</div>

cssdiv {
  border: 1px solid red;
}
img {
  float: right;
}

Результат:

ပုံရုပ်သည် ဘယ်ဘက်အခြမ်းတွင် မျောနေစေရန် လုပ်ကြည့်ပါ - ရလဒ်သည် အလားတူဖြစ်လိမ့်မည်။

html<div>
  <img src="img.png" alt="">
  စာသား
</div>

cssdiv {
  border: 1px solid red;
}
img {
  float: left;
}

Результат:

အောက်ခြေတွင် နောက်ထပ် div တစ်ခု ထပ်ထည့်ကြည့်ပါ - ပုံရုပ်သည် ထို div အပေါ်သို့လည်း ကျော်ဝင်လိမ့်မည်။

html<div>
  <img src="img.png" alt="">
  စာသား
</div>
<div>
  စာသား
</div>

cssdiv {
  border: 1px solid red;
}
img {
  float: left;
}

Результат:

သို့သော် ပထမ div အတွင်း စာသားအများကြီးထည့်ပါက၊ ပုံရုပ်ထက် အမြင့်ပိုများလာလျှင် - ၎င်းသည် ဒုတိယ div အပေါ်သို့ ကျော်မဝင်တော့ပါ။

html<div>
  <img src="img.png" alt="">
  some long text
</div>
<div>
  စာသား
</div>

cssdiv {
  text-align: justify;
  border: 1px solid red;
}
img {
  float: left;
}

Результат:

ဤအချက်သည် အလွန်အရေးကြီးပါသည် - ဖွံ့ဖြိုးတည်ဆောက်ရာတွင် သင်၏ block တစ်ခုခုတွင် စာသားအလုံအလောက်ရှိနေသော်လည်း ဝဘ်ဆိုက်အမှန်တကယ်အလုပ်လုပ်စဉ်တွင် ထို block အတွင်း စီစဉ်ထားသည်ထက် စာသားနည်းနေနိုင်သည်။ ထိုသို့ဖြစ်လျှင် မျောနေသောအရာဝတ္ထုများ ကပ်လျက်ရှိသော blocks များအပေါ် ကျော်ဝင်ခြင်းပြဿနာ ပေါ်လာနိုင်သည်။