CSS හි පාවෙන දෙයක් තුළ පෙළ

මෙම අවස්ථාවේදී අපගේ 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 එකක් එකතු කරමු - පින්තූරය එයටම අතුල් කරයි:

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;
}

Результат:

මෙම කරුණ ඉතා වැදගත් ය - වැඩ වර්ධනයේදී, ඔබේ යම් කොටසක බොහෝ පෙළක් තිබිය හැකි අතර, පසුව වෙබ් අඩවිය ක්‍රියාත්මක වන විට, මෙම කොටසේ යොදාගෙන ඇති පෙළට වඩා අඩු පෙළක් තිබිය හැකිය. ප්‍රතිඵලයක් වශයෙන්, පාවෙන අංග අසල්වැසි බ්ලොක් මත අතුල් කිරීමේ ගැටලුව මතුවේ.