CSS'de Float Ebeveyninde Metin
Div için height özelliğini kaldıralım
ve resmin önüne küçük bir metin koyalım.
Bu durumda div'imizin yüksekliği metnin yüksekliğine eşit olacak ve resim yine div'in dışına taşacak:
<div>
metin
<img src="img.png" alt="">
</div>
div {
border: 1px solid red;
}
img {
float: right;
}
:
Metni resmin ardına koyalım - sonuç değişmeyecek:
<div>
<img src="img.png" alt="">
metin
</div>
div {
border: 1px solid red;
}
img {
float: right;
}
:
Resmin sol tarafta yüzmesini sağlayalım - sonuç benzer olacak:
<div>
<img src="img.png" alt="">
metin
</div>
div {
border: 1px solid red;
}
img {
float: left;
}
:
Altına bir div daha ekleyelim - resim onun da üzerine taşacak:
<div>
<img src="img.png" alt="">
metin
</div>
<div>
metin
</div>
div {
border: 1px solid red;
}
img {
float: left;
}
:
Ancak ilk div'e, yüksekliği resimden daha fazla olacak kadar çok metin eklenirse - resim ikinci div'in üzerine taşmaz:
<div>
<img src="img.png" alt="">
some long text
</div>
<div>
metin
</div>
div {
text-align: justify;
border: 1px solid red;
}
img {
float: left;
}
:
Bu nokta çok önemlidir - geliştirme sırasında bir blokta yeterince çok metin olabilir, ancak site gerçek çalışma ortamında bu blokta planlandığından daha az metin bulunabilir. Bu durumda, yüzen öğelerin komşu blokların üzerine taşma sorunu ortaya çıkabilir.
