Lær, hvordan du får tekst til at ombryde et flydende billede med CSS.
For at få din tekst til at ombryde billedet til højre, på samme måde som det er på billedet, der introducerer denne artikel, skal du bruge en CSS-regel som denne:
Float: left-reglen får billedet til at flytte til venstre margen. Reglen om polstring til højre forhindrer, at teksten støder helt op mod højre side af billedet. Hvis en ramme blev tilføjet til dette billede, ville der komme polstring mellem billedet og rammen. Se afsnit 2 for at arbejde med et billede med en kant.
Tilføj derefter margener til venstre og højre for billedet for at centrere det. Den korrekte værdi for venstre og højre margen for at centrere noget er automatisk.
For at skabe en tyk, rammelignende kant ved hjælp af rillekantstilen, kan en regel som denne bruges:
Andre kantstile er solide, prikkede, stiplede, dobbelte, ridge, indsatte og udspringende. Bredde kan udtrykkes i pixels, ems eller procenter.
Kanter kan anvendes selektivt øverst, højre, nederst og til venstre i billedet. Du kan bruge denne viden til at skabe en effekt som en skygge.
Ved at bruge en solid kant i 2 grå nuancer på lige højre og nederste kant, får du en slagskyggeeffekt.
img { flyde: venstre; grænse-højre-stil: solid; kant-højre-bredde: 8px; kant-højre-farve: #CCCCCC; border-bottom-stil: solid; border-bottom-width: 8px; border-bottom-color: #999999; margin-højre: 1em; margin-bund: 1em; }
Tip
Hvis du har billeder i mere end én division (div) af en side, skal du bruge efterkommervælgere til at style dem individuelt. Mulige vælgere: #content img, #sidebar img, #feature img.
