Szöveg float szülőelemben CSS-ben
Vegyük ki a height tulajdonságot a
div elemről és tegyünk egy rövid szöveget
a kép elé.
Ebben az esetben a div magassága egyenlő lesz a szöveg magasságával, és a kép továbbra is kilóg a divből:
<div>
szöveg
<img src="img.png" alt="">
</div>
div {
border: 1px solid red;
}
img {
float: right;
}
:
Tegyük a szöveget a kép után - az eredmény nem változik:
<div>
<img src="img.png" alt="">
szöveg
</div>
div {
border: 1px solid red;
}
img {
float: right;
}
:
Most legyen a kép balra floatolva - az eredmény hasonló lesz:
<div>
<img src="img.png" alt="">
szöveg
</div>
div {
border: 1px solid red;
}
img {
float: left;
}
:
Tegyünk alá egy másik div-et - a kép ráfog nyúlni:
<div>
<img src="img.png" alt="">
szöveg
</div>
<div>
szöveg
</div>
div {
border: 1px solid red;
}
img {
float: left;
}
:
Ha viszont az első div-be annyi szöveget rakunk, hogy magasabb legyen a képnél - akkor nem fog a második div-re rányúlni:
<div>
<img src="img.png" alt="">
some long text
</div>
<div>
szöveg
</div>
div {
text-align: justify;
border: 1px solid red;
}
img {
float: left;
}
:
Ez a pont nagyon fontos - fejlesztés közben előfordulhat, hogy egy blokkban sok szöveg van, majd a weboldal valódi működése során ebben a blokkban kevesebb szöveg jelenik meg, mint amennyit terveztek. Így kiderülhet, hogy ebben az esetben megjelenik a probléma a float elemek szomszédos blokkokra nyúlásával.
