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

Результат: