Lebegő elemek a címkék alatt CSS-ben
Tegyük fel, hogy most van két bekezdésünk és egy kép,
amely az első bekezdésben található. Tegyük fel, hogy ennek a képnek
a float tulajdonsága be van állítva
right értékre, valamint átlátszóságra:
<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;
}
:
Most pedig helyezzük a HTML kódban a képet az első bekezdés után, és nézzük meg, mi történik:
<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;
}
:
Amint látjuk, a képet a második bekezdés szövege folytatja körbe, de az elsőé nem.
Helyezzük át a képünket a második bekezdés után. Ebben az esetben jobbra fog lebegni, de nem fog körbefolyni:
<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;
}
:
Kiderült, hogy csak azok az elemek fogják körbefolyni a képet, amelyek alatta találhatók, de nem azok, amelyek felette vannak.
