Teks in die ouer van floats in CSS
Laat ons die eienskap height vir
die div verwyder en 'n klein teksie
voor die prentjie plaas.
In hierdie geval sal die hoogte van ons div gelyk wees aan die hoogte van die teks, en die prentjie sal steeds uitsteek oor die div:
<div>
teks
<img src="img.png" alt="">
</div>
div {
border: 1px solid red;
}
img {
float: right;
}
:
Laat ons die teks na die prentjie plaas - die resultaat sal nie verander nie:
<div>
<img src="img.png" alt="">
teks
</div>
div {
border: 1px solid red;
}
img {
float: right;
}
:
Laat ons die prentjie na links laat dryf - die resultaat sal soortgelyk wees:
<div>
<img src="img.png" alt="">
teks
</div>
div {
border: 1px solid red;
}
img {
float: left;
}
:
Laat ons onder nog 'n div byvoeg - die prentjie sal daaroor heen val:
<div>
<img src="img.png" alt="">
teks
</div>
<div>
teks
</div>
div {
border: 1px solid red;
}
img {
float: left;
}
:
As ons egter soveel teks in die eerste div byvoeg dat dit in hoogte groter is as die prentjie - sal dit nie oor die tweede div val nie:
<div>
<img src="img.png" alt="">
some long text
</div>
<div>
teks
</div>
div {
text-align: justify;
border: 1px solid red;
}
img {
float: left;
}
:
Hierdie punt is baie belangrik - tydens ontwikkeling kan dit gebeur dat daar baie teks in 'n sekere blok is, en dan tydens die werklike werking van die webwerf is daar minder teks in die blok as beplan. Dit sal beteken dat in hierdie geval die probleem van drywende elemente wat oor aangrensende blokke val, na vore sal kom.
