CSS හි float ගුණය හැඳින්වීම

අපට දිගු පෙළක් සහිත div එකක් තිබිය යුතුය. අපි මෙම පෙළේ ආරම්භයේ රූපයක් ඇතුල් කරමු:

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

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

ඔබට පෙනෙන පරිදි, රූපයේ පතුල පෙළේ පළමු පේළියේ පිහිටා ඇත, ඉතිරි කොටස ඉහළට යයි. රූපයේ දකුණු පසින් විශාල හිස් අවකාශයක් තිබේ. අපි එම හිස් අවකාශය පෙළෙන් පුරවා ගනිමු. මේ සඳහා රූපයට float ගුණය left ලෙස සකසමු:

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

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

ඉතින්, දැන් රූපය වම් පසින් පාවෙන අතර පෙළ ඒ අනුව දකුණු පසින් එය වටා ගලා යයි. මෙමගින් රූපය පසෙක ඇති හිස් අවකාශය අතුරුදහන් වේ.

රූපය වම් පසින් නොව දකුණු පසින් පාවෙන පරිදි කළ හැකිය. මේ සඳහා float අගය right ලෙස සකසන්න:

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

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

දිගු පෙළක් ගන්න. පෙළේ ආරම්භයේ එක් රූපයක් ද, මැද තවත් රූපයක් ද ඇතුල් කරන්න. පළමු රූපය වම් පසින් ද, දෙවන රූපය දකුණු පසින් ද පාවෙන පරිදි සකසන්න.