Bruk CSS Align Left for å flyte et nettstedsbilde til venstre for teksten

Element på blokknivå på en webside vises i sekvensiell rekkefølge. For å forbedre sidens utseende eller nytte, kan du endre den rekkefølgen ved å pakke inn blokker, inkludert bilder, slik at tekst flyter rundt bilder.

I form av webdesign er denne effekten kjent som flytende bilde. Dette oppnås med CSS-eiendomflyte, som lar tekst flyte rundt det venstrejusterte bildet til høyre side (eller rundt et høyrejustert bilde til venstre side).

Start med HTML

Dette eksemplet legger til et bilde i begynnelsen av et avsnitt (før teksten, men etter åpningen

stikkord). Her er den første HTML-markeringen:

Teksten i avsnittet går her. I dette eksemplet har vi et bilde av et hodeskuddfoto, så denne teksten kan beskrive personen i hodeskuddet.

Som standard vil siden vises med bildet over teksten, fordi bilder er elementer på blokknivå i HTML. Dette betyr at nettleseren viser linjeskift før og etter bildeelementet som standard. For å endre dette standardutseendet ved hjelp av CSS, legg til en klasseverdi (

venstre) til bildeelementet for å tjene som en krok som egenskaper kan festes til.

Teksten i avsnittet går her. I dette eksemplet har vi et bilde av et hodeskuddfoto, så denne teksten kan beskrive personen i hodeskuddet.

Merk at denne klassen ikke gjør noe alene. CSS vil oppnå ønsket stil.

Legge til CSS-stiler

Legg til denne regelen på nettstedets stilark:

.venstre {
flyte: venstre;
polstring: 0 20px 20px 0;
}

Denne stilen flyter hva som helst med klassen venstre til venstre på siden og legger til litt polstring til høyre og nederst på bildet slik at teksten ikke støter rett opp mot det.

I en nettleser vil bildet nå være justert til venstre; teksten ser ut til høyre med mellomrom mellom de to.

Andre måter å oppnå disse stilene på

Du kan også ta klasseverdien av bildet og style det med CSS ved å skrive en mer spesifikk velger. I eksemplet nedenfor er bildet inne i en divisjon med a hovedinnhold klasseverdi.

Teksten i avsnittet går her. I dette eksemplet har vi et bilde av et hodeskuddfoto, så denne teksten kan beskrive personen i hodeskuddet.

For å style dette bildet, skriv dette CSS:

.main-content img { 
flyte: venstre; 
polstring: 0 20px 20px 0;
}

I dette scenariet er bildet justert til venstre, med teksten som svever rundt som før, men uten den ekstra klasseverdien i markeringen. Å gjøre dette i stor skala kan bidra til å lage en mindre HTML-fil, som blir enklere å administrere og kan forbedre ytelsen.

Unngå innebygde stiler

Til slutt kan du bruke integrerte stiler:

Teksten i avsnittet går her. I dette eksemplet har vi et bilde av et hodeskuddfoto, så denne teksten kan beskrive personen i hodeskuddet.

Dette er imidlertid ikke tilrådelig fordi det kombinerer stilen til et element med dets strukturelle markering. Beste praksis tilsier at stilen og strukturen til en side forblir atskilt. Denne segregeringen er spesielt nyttig når du trenger å endre sidens layout og se etter forskjellige skjermstørrelser og enheter med et responsivt nettsted.