Vipengele Vinavyoelea Chini ya Vitambulisho kwenye CSS
Hebu sasa tuna aya mbili na picha,
iliyowekwa kwenye aya ya kwanza. Hebu picha hii
tumepewa sifa float kwa thamani
right, na pia ukungu wa nusu:
<div>
<p>
<img src="img.png" alt="">
Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
</p>
<p>
some long text
</p>
</div>
div {
border: 1px solid red;
text-align: justify;
}
p {
border: 1px solid green;
}
img {
float: right;
opacity: 0.5;
}
:
Na sasa hebu tuweke kwenye msimbo wa HTML picha baada ya aya ya kwanza na tuone kitakachotokea:
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
</p>
<img src="img.png" alt="">
<p>
some long text
</p>
</div>
div {
border: 1px solid red;
text-align: justify;
}
p {
border: 1px solid green;
}
img {
float: right;
opacity: 0.5;
}
:
Kama tunavyoona, picha inazungukwa na maandishi ya aya ya pili, lakini si ya kwanza.
Hebu tuihamishe kabisa picha yetu baada ya aya ya pili. Katika kesi hii itaelea upande wa kulia, lakini hakutaweza kuzungukwa na maandishi:
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
</p>
<p>
some long text
</p>
<img src="img.png" alt="">
</div>
div {
border: 1px solid red;
text-align: justify;
}
p {
border: 1px solid green;
}
img {
float: right;
opacity: 0.5;
}
:
Inabadilika kuwa, picha itazungukwa na maandishi tu vipengee vilivyo chini yake, lakini sio vile vilivyo juu yake.
