CSS -uitleg - dryf en duidelik
Die CSS- floateienskap spesifiseer hoe 'n element moet dryf.
Die CSS clear-eienskap spesifiseer watter elemente langs die skoongemaakte element kan dryf en aan watter kant.
Die vlotter Eiendom
Die floateiendom word gebruik vir posisionering en formatering van inhoud, bv. laat 'n prent links na die teks in 'n houer dryf.
Die floateiendom kan een van die volgende waardes hê:
-
left- Die element dryf aan die linkerkant van sy houer -
right- Die element dryf regs van sy houer -
none- Die element dryf nie (sal net vertoon word waar dit in die teks voorkom). Dit is verstek -
inherit- Die element erf die dryfwaarde van sy ouer
In sy eenvoudigste gebruik kan die floateiendom gebruik word om teks om beelde te draai.
Voorbeeld - dryf: regs;
Die volgende voorbeeld spesifiseer dat 'n prent na regs in 'n teks moet dryf :
Die pyn self is liefde, die hoofbergingstelsel. Phasellus imperdiet, nee en dit is soms gesê, maar die gebrek aan haat Maecenas is aanhangers, wraaksugtig en nie kook nie, die skrywer van massalewe.
Voorbeeld
img {
float: right;
}
Voorbeeld - dryf: links;
Die volgende voorbeeld spesifiseer dat 'n prent na links in 'n teks moet dryf :
Die pyn self is liefde, die hoofbergingstelsel. Phasellus imperdiet, nee en dit is soms gesê, maar die gebrek aan haat Maecenas is aanhangers, wraaksugtig en nie kook nie, die skrywer van massalewe.
Voorbeeld
img {
float: left;
}
Voorbeeld - Geen vlot nie
In die volgende voorbeeld sal die prent vertoon word net waar dit in die teks voorkom (float: none;):
Die pyn self is liefde, die hoofbergingstelsel. Phasellus imperdiet, nee en dit is soms gesê, maar die gebrek aan haat Maecenas is aanhangers, wraaksugtig en nie kook nie, die skrywer van massalewe.
Voorbeeld
img {
float: none;
}
Voorbeeld - Sweef langs mekaar
Normaalweg sal div-elemente bo-op mekaar vertoon word. As ons egter gebruik float: leftkan ons elemente langs mekaar laat dryf:
Voorbeeld
div {
float: left;
padding: 15px;
}
.div1 {
background: red;
}
.div2 {
background: yellow;
}
.div3 {
background: green;
}