Maandishi kwenye mzazi wa floats katika CSS
Wacha tuondoe sifa height kwa
div na tuweke maandishi machache
kabla ya picha.
Katika hali hii, urefu wa div yetu utakuwa sawa na urefu wa maandishi, na picha bado itatokeza nje ya div:
<div>
maandishi
<img src="img.png" alt="">
</div>
div {
border: 1px solid red;
}
img {
float: right;
}
:
Wacha tuweke maandishi baada ya picha - matokeo hayatabadilika:
<div>
<img src="img.png" alt="">
maandishi
</div>
div {
border: 1px solid red;
}
img {
float: right;
}
:
Wacha tufanye ili picha ielee upande wa kushoto - matokeo yatakuwa sawa:
<div>
<img src="img.png" alt="">
maandishi
</div>
div {
border: 1px solid red;
}
img {
float: left;
}
:
Wacha tuongeze div nyingine chini - picha itaingilia juu yake:
<div>
<img src="img.png" alt="">
maandishi
</div>
<div>
maandishi
</div>
div {
border: 1px solid red;
}
img {
float: left;
}
:
Ikiwa kwenye div ya kwanza tunaongeza maandishi mengi sana kiasi kwamba kwa urefu utakuwa mkubwa kuliko picha - haitaingilia kwenye div ya pili:
<div>
<img src="img.png" alt="">
some long text
</div>
<div>
maandishi
</div>
div {
text-align: justify;
border: 1px solid red;
}
img {
float: left;
}
:
Huu wakati ni muhimu sana - wakati wa ukuzaji inavyowezekana kuwa katika kituo fulani una maandishi mengi, na kisha wakati wa kazi halisi ya wavuti kwenye kituo hiki kutakuwa na maandishi machache zaidi kuliko yaliyopangwa. Inageuka kuwa katika kesi hii tatizo la vitu vinavyoelea kukabiliana na vitalu vya jirani litaonekana.
