Lær hvordan du får tekst til å brytes rundt et flytende bilde med CSS.
For å få teksten til å vikle rundt bildet til høyre, på samme måte som på bildet som introduserer denne artikkelen, bruk en CSS-regel som denne:
Flytende: venstre-regelen gjør at bildet flyttes til venstre marg. Regelen for polstring til høyre forhindrer at teksten støter rett opp mot høyre side av bildet. Hvis en kantlinje ble lagt til dette bildet, ville polstring komme mellom bildet og kantlinjen. Se avsnitt 2 for å arbeide med et bilde med en kantlinje.
Deretter legger du til marger til venstre og høyre for bildet for å sentrere det. Den riktige verdien for venstre og høyre marg for å sentrere noe er automatisk.
For å lage en tykk, rammelignende kant ved å bruke sporkantstilen, kan en regel som denne brukes:
Andre kantstiler er solid, stiplet, stiplet, dobbel, rygg, innfelt og utgående. Bredde kan uttrykkes i piksler, ems eller prosenter.
Kanter kan brukes selektivt til toppen, høyre, bunn og venstre i bildet. Du kan bruke denne kunnskapen til å skape en effekt som en skygge.
Ved å bruke en solid kant i 2 nyanser av grått på bare høyre og nederste kant, får du en skyggeeffekt.
img { flyte: venstre; border-right-stil: solid; border-right-width: 8px; kantlinje-høyre-farge: #CCCCCC; border-bottom-stil: solid; border-bottom-width: 8px; border-bottom-color: #999999; marg-høyre: 1em; marg-bunn: 1em; }
Tips
Hvis du har bilder i mer enn én divisjon (div) av en side, bruk etterkommervelgere for å style dem individuelt. Mulige velgere: #content img, #sidebar img, #feature img.
