Lär dig hur du får text att lindas runt en flytande bild med CSS.
För att få din text att lindas runt bilden till höger, på samma sätt som det är på bilden som introducerar den här artikeln, använd en CSS-regel så här:
Regeln flytande: vänster gör att bilden flyttas till vänstermarginalen. Regeln utfyllnad-höger hindrar texten från att stöta rakt mot höger sida av bilden. Om en ram lades till den här bilden skulle utfyllnad komma mellan bilden och kanten. Se avsnitt 2 för att arbeta med en bild med en ram.
Lägg sedan till marginaler till vänster och höger om bilden för att centrera den. Det korrekta värdet för vänster och höger marginal för att centrera allt är auto.
För att skapa en tjock, ramliknande kant med spårkantsstilen kan en regel som denna användas:
Andra kantstilar är solid, prickad, streckad, dubbel, ås, infälld och utgående. Bredd kan uttryckas i pixlar, ems eller procent.
Kanter kan appliceras selektivt längst upp, till höger, längst ner och till vänster i bilden. Du kan använda denna kunskap för att skapa en effekt som en skugga.
Genom att använda en solid kant i 2 nyanser av grått på precis den högra och nedre kanten får du en skuggeffekt.
img { flyta: vänster; border-right-style: solid; border-right-width: 8px; kant-höger-färg: #CCCCCC; border-bottom-stil: solid; border-bottom-width: 8px; border-bottom-color: #999999; marginal-höger: 1em; marginal-botten: 1em; }
Dricks
Om du har bilder i mer än en avdelning (div) av en sida, använd efterkommande väljare för att utforma dem individuellt. Möjliga väljare: #content img, #sidebar img, #feature img.
