Tekst in de ouder van floats in CSS
Laten we de eigenschap height voor
de div weghalen en een kleine tekst
voor de afbeelding plaatsen.
In dit geval zal de hoogte van onze div gelijk zijn aan de hoogte van de tekst, en de afbeelding zal nog steeds uit de div steken:
<div>
tekst
<img src="img.png" alt="">
</div>
div {
border: 1px solid red;
}
img {
float: right;
}
:
Laten we de tekst na de afbeelding plaatsen - het resultaat verandert niet:
<div>
<img src="img.png" alt="">
tekst
</div>
div {
border: 1px solid red;
}
img {
float: right;
}
:
Laten we ervoor zorgen dat de afbeelding naar links drijft - het resultaat zal vergelijkbaar zijn:
<div>
<img src="img.png" alt="">
tekst
</div>
div {
border: 1px solid red;
}
img {
float: left;
}
:
Laten we onderaan nog een div toevoegen - de afbeelding zal eroverheen vallen:
<div>
<img src="img.png" alt="">
tekst
</div>
<div>
tekst
</div>
div {
border: 1px solid red;
}
img {
float: left;
}
:
Als er echter zoveel tekst aan de eerste div wordt toegevoegd dat deze in hoogte groter is dan de afbeelding - zal deze niet over de tweede div vallen:
<div>
<img src="img.png" alt="">
some long text
</div>
<div>
tekst
</div>
div {
text-align: justify;
border: 1px solid red;
}
img {
float: left;
}
:
Dit punt is erg belangrijk - tijdens ontwikkeling kan het zijn dat er in een bepaald blok voldoende veel tekst staat, en later bij het daadwerkelijk gebruik van de site in dit blok minder tekst staat dan gepland. Het gevolg is dat in dat geval het probleem van overlappende drijvende elementen op aangrenzende blokken zichtbaar wordt.
