mynewspapers.net

HTML: Hur vill radbryta Text runt en bild

HTML: Hur vill radbryta Text runt en bild


Sedan HTML 4.01 används Cascading Style Sheet (CSS) kod för att definiera en bildtagg justering. Webbdesigners använda "flyta" regeln i CSS för att anpassa ett HTML-element--text, bilder och annat innehåll--till höger eller vänster om en sida. Alla intilliggande element på sidan kommer att linda runt elementet flöt. I det här fallet figursätts texten runt en bild som flöt. Använda mer CSS-kod för att definiera bildens marginaler, gränser och andra formateringsalternativ.

Instruktioner

• Öppna HTML-filen i en oformaterad text eller kod redigeringsprogram och hitta den text du vill ska figursättas runt bilden. Bildens kod ska gå ovanför texten, och placera inte bild koden mellan alla taggar. Placera följande kod för att lägga till en bild: < img src = "ditt-bild.gif" class = "svepte" / > ändra "din-bild.gif" till webbadressen till din bild. Använd endast filnamnet om filen finns i samma mapp som HTML-filen som du vill lägga till bilden. Ändra "svepte" oavsett klass namn du gillar; proffs föredrar att använda meningsfulla namn.

• Redigera en HTML-fil CSS koden att justera bilden. Om webbsidan använder en länkad CSS-fil, öppna filen och lägger till koden där. Om webbsidan använder < style > och < / stil > taggar, sedan lägga till nödvändiga koden mellan dessa taggar. Lägg till < style > och < / stil > mellan < head > och < / head > taggen i HTML fil om det inte länken till en CSS-fil och innehåller ännu inte < style > taggar. Koden för att flyta en bild är följande: img.wrapped {float: left;} Ändra "vänster" till "rätt" om du vill justera bilden till höger. Ändra "svepte" till den klass du anger i < img >-taggen.

• Lägga till marginaler och annan formatering till bilden genom att lägga till fler regler till din CSS-kod. Marginal utrymme runt bilden och kommer att hålla den från att krocka med figursatt text. Följande är några exempelkod: img.wrapped {float: vänster; marginal: 5px; border: 1px solid svart;} Ändra numret efter "marginal" justera marginalstorleken i att kod. Marginalerna som här definieras av pixlar. denna bild har en fem-pixel marginal på alla sidor.