HTML kode til Wrap tekst omkring billede

2019

Har du brug for koden til at indhente tekst omkring et billede? Normalt når du opretter en HTML-side, strømmer alt lineært, hvilket betyder en blok direkte efter den anden. Alle mine tidligere indlæg er et eksempel på dette, dvs. tekst, derefter billede, tekst osv.

Nogle gange vil du muligvis inkludere tekst ud for et billede i stedet for under det. Dette kaldes indpakning af tekst omkring billedet. Det er faktisk ret nemt at pakke tekst ved hjælp af HTML. Bemærk, at du ikke behøver at bruge CSS for at pakke ind tekst.

Men i disse dage anbefaler W3C at bruge CSS i stedet for HTML til disse typer opgaver. Jeg vil nævne begge metoder nedenfor, men hvis du kan, er det bedre at bruge CSS, da det er mere tilpasseligt til lydhurtige website designs.

Indpak tekst omkring billede ved hjælp af HTML

Det er et godt sted at være med, og det er vigtigt for dig. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus et magnis disorderende montes, nascetur ridiculus mus. Alquam et felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ud pellentesque nunc i lorem egestas non imperdiet enim congue.

For at få teksten sammen på højre side af billedet, skal du justere billedet til venstre:

Din tekst går her.

Hvis du vil have teksten vist til venstre, og billedet vises helt til højre, skal du bare ændre justeringsparameteren til "højre".

Din tekst går her.

Det er det! Ganske let rigtigt? Den eneste gang, du vil bruge CSS, er, hvis du vil tilføje marginaler til billederne, så der er plads mellem teksten og billedet.

Du kan tilføje margener til et billede ved at bruge følgende CSS-stylingskode:

Din tekst går her.

Ovenstående kode bruger MARGIN CSS-elementet til at tilføje 10 pixel af hvidrum på højre side af billedet. Da vi har justeret billedet tilbage, ønsker vi at tilføje hvidrummet til højre.

Dybest set repræsenterer de fire tal TOP RIGHT BOTTOM LEFT. Så hvis du vil tilføje det hvide rum til et højrejusteret billede, ville du gøre det her:

Din tekst går her.

Så det er ret nemt at bruge HTML til at udføre denne opgave, men nok en gang kan det ikke fungere godt for lydhøre websteder.

Indpak tekst omkring billede ved hjælp af CSS

Den bedre måde at pakke tekst omkring et billede på er at bruge CSS. Det giver dig mere fin korn kontrol over placeringen af elementerne og fungerer bedre med moderne kodningsstandarder.

Selvom jeg inkluderede CSS direkte i billedtaggen i HTML-eksemplet, bør du aldrig gøre det heller heller. I stedet skal du have en separat fil kaldet et stylesheet, der indeholder hele din CSS-kode.

I IMG-mærket tildeler du blot en klasse til mærket og giver det et navn. I mit eksempel navngav jeg klassen tilbage . I mit stylesheet er alt, hvad jeg skal gøre, tilføjet følgende kode:

 .left {float: left; polstring: 0 10px 0 0;}

Som du kan se, tilføjede jeg 10 px polstring til højre side af det venstrejusterede billede. Jeg har også brugt floategenskaben til at flytte billedet ud af det normale flow af dokumentet og læg det til venstre for forældrebeholderen.

Som du kan se, er det meget renere end at tilføje al den kode til selve IMG taggen. Det er også nemmere at administrere, og du kan bruge mange flere CSS-egenskaber til at tilpasse udseendet på din webside. Hvis du har spørgsmål, er du velkommen til at kommentere. God fornøjelse!