Trenger koden å pakke inn tekst rundt et bilde? Normalt når du lager en HTML-side, strømmer alt lineært, noe som betyr ett blokk direkte etter hverandre. Alle mine tidligere innlegg er et eksempel på dette, dvs. tekst, deretter bilde, tekst osv.
Noen ganger kan det være lurt å inkludere tekst ved siden av et bilde i stedet for under det. Dette kalles innpakning av tekst rundt bildet. Det er faktisk ganske enkelt å pakke inn tekst ved hjelp av HTML. Merk at du ikke trenger å bruke CSS for å pakke inn tekst.
Men i disse dager anbefaler W3C å bruke CSS i stedet for HTML for slike oppgaver. Jeg nevner begge metodene nedenfor, men hvis du kan, er det bedre å bruke CSS siden det er mer tilpasningsdyktig til lydhør nettside design.
Legg inn tekst rundt bildet ved hjelp av HTML
Kjæresten er dum og sitter, og er med på å hjelpe. Fusce diktum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus en magnis disurbia montas, nascetur ridiculus mus. Dette er et felis vite augue lobortis dictum. Innkjøpsmodus Ut pellentesque nunc i lorem egestas non imperdiet enim congue.
For å få teksten viklet langs høyre side av bildet, må du justere bildet til venstre:
Din tekst går her.
Hvis du vil at teksten skal vises til venstre og bildet som skal vises helt til høyre, bare endre justeringsparameteren til "høyre".
Kjæresten er dum og sitter, og er med på å hjelpe. Fusce diktum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus en magnis disurbia montas, nascetur ridiculus mus. Dette er et felis vite augue lobortis dictum. Innkjøpsmodus Ut pellentesque nunc i lorem egestas non imperdiet enim congue.
Din tekst går her.
Det er det! Ganske enkelt riktig? Den eneste gangen du vil bruke CSS, er hvis du vil legge til marginer i bildene, slik at det er litt mellomrom mellom teksten og bildet.
Du kan legge til marginer på et bilde ved å bruke følgende CSS-stylingskode:
Din tekst går her.
Ovenstående kode bruker MARGIN CSS-elementet for å legge til 10 piksler av hvitt plass på høyre side av bildet. Siden vi har justert bildet igjen, vil vi legge til hvitt plass til høyre.
I utgangspunktet representerer de fire tallene TOP RIGHT BOTTOM LEFT. Så hvis du vil legge til det hvite rommet til et rettjustert bilde, ville du gjøre dette:
Din tekst går her.
Så det er ganske enkelt å bruke HTML for å utføre denne oppgaven, men nok en gang kan det ikke fungere bra for lydhørsteder.
Wrap Text Around Image ved hjelp av CSS
Den bedre måten å pakke inn tekst rundt et bilde er å bruke CSS. Det gir deg mer fin kornkontroll over plasseringen av elementene og fungerer bedre med moderne kodingsstandarder.
Selv om jeg inkluderte CSS direkte i bildemerket i HTML-eksemplet, burde du aldri gjøre det heller heller. I stedet bør du ha en egen fil kalt et stilark som inneholder all din CSS-kode.
I IMG-taggen tilordner du bare en klasse til taggen og gir den et navn. I mitt eksempel har jeg navngitt klassen igjen . I min stilark er alt jeg trenger å gjøre ved å legge til følgende kode:
.left {float: left; polstring: 0 10px 0 0;} Som du kan se, la jeg til 10px med polstring til høyre side av bildet med venstrejustering. Jeg brukte også flytegenskapen til å flytte bildet ut av den normale strømmen av dokumentet og legge den til venstre på foreldrebeholderen.
Som du kan se, er det mye renere enn å legge all den koden til selve IMG-taggen. Det er også enklere å administrere, og du kan bruke mange flere CSS-egenskaper for å tilpasse utseendet på nettsiden din. Hvis du har noen spørsmål, vær så snill å kommentere. Nyt!
