clear ගුණාංගය
clear ගුණාංගය
float ගුණාංගය මගින් නිර්වචනය කරන ලද
එක් අංගයක් වෙනත් අංග මගින් වැලලීම අවලංගු කරයි.
එය පහත අගයන් ගත හැකිය:
none (තමාගේම ක්රියාව අවලංගු කරයි),
both (ඒකාවශ්යයෙන් වම් සහ දකුණු පැත්තෙන් float අවලංගු කරයි),
left (වම් පැත්තෙන් float අවලංගු කරයි), right (දකුණු පැත්තෙන්
float අවලංගු කරයි).
වාක්ය රචනා ක්රමය
තෝරන්නා {
clear: none හෝ left හෝ right හෝ both
}
උදාහරණය
රූපය වම් පැත්තෙන් පාඨය මගින් වැලලීම අවලංගු කරමු:
<img class="image" src="bg.png" alt="">
<div class="txt">
<p>
text text text text text text
text text text text text text
text text text text text text
text text text text text text
</p>
</div>
.image {
float: left;
padding-right: 10px;
}
.txt {
clear: left;
}
:
උදාහරණය
දැන් රූපය දකුණු පැත්තෙන් පාඨය මගින් වැලලීම අවලංගු කරමු:
<img class="image" src="bg.png" alt="">
<div class="txt">
<p>
text text text text text text
text text text text text text
text text text text text text
text text text text text text
</p>
</div>
.image {
float: right;
padding-right: 10px;
}
.txt {
clear: right;
}
:
උදාහරණය
clear ගුණාංගයේම ක්රියාකාරිත්වය
අවලංගු කරමු:
<img class="image" src="bg.png" alt="">
<div class="txt">
<p>
text text text text text text
text text text text text text
text text text text text text
text text text text text text
</p>
</div>
.image {
float: right;
padding-right: 10px;
}
.txt {
clear: none;
}
:
මේවාත් බලන්න
-
bottomගුණාංගය,
අංගයේ පහළ ඉර කෙළවරේ ස්ථානය නියම කරයි -
topගුණාංගය,
අංගයේ ඉහළ ඉර කෙළවරේ ස්ථානය නියම කරයි -
leftගුණාංගය,
අංගයේ වම් ඉර කෙළවරේ ස්ථානය නියම කරයි -
rightගුණාංගය,
අංගයේ දකුණු ඉර කෙළවරේ ස්ථානය නියම කරයි -
::backdropසුළු අංගය,
පළමු අංගයට පසුව ස්ථානගත කිරීම නියම කරයි -
caption-sideගුණාංගය,
වගුවේ ශීර්ෂකයේ ස්ථානය නියම කරයි