Brug CSS Align Left til at flyde et webstedsbillede til venstre for teksten

Elementer på blokniveau på en webside vises i rækkefølge. For at forbedre sidens udseende eller anvendelighed kan du ændre denne rækkefølge ved at indpakke blokke, inklusive billeder, således at tekst flyder omkring billeder.

I form af webdesign er denne effekt kendt som flydende billedet. Dette opnås med CSS ejendomflyde, som tillader tekst at flyde rundt om det venstrejusterede billede til sin højre side (eller omkring et højrejusteret billede til dets venstre side).

Start med HTML

Dette eksempel tilføjer et billede i begyndelsen af ​​et afsnit (før teksten, men efter åbningen

tag). Her er den indledende HTML-markering:

Afsnittets tekst går her. I dette eksempel har vi et billede af et headshotfoto, så denne tekst beskriver muligvis personen i headshot.

Som standard vises siden med billedet over teksten, fordi billeder er elementer på blokniveau i HTML. Dette betyder, at browseren som standard viser linjeskift før og efter billedelementet. For at ændre dette standardudseende ved hjælp af CSS skal du tilføje en klasseværdi (

venstre) til billedelementet for at tjene som en krog, hvortil egenskaber kan fastgøres.

Afsnittets tekst går her. I dette eksempel har vi et billede af et headshotfoto, så denne tekst beskriver muligvis personen i headshot.

Bemærk, at denne klasse ikke gør noget alene. CSS opnår den ønskede stil.

Tilføjelse af CSS-stilarter

Føj denne regel til webstedets stilark:

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

Denne stil flyder noget med klassen venstre til venstre på siden og tilføjer lidt polstring til højre og nederst på billedet, så teksten ikke støder lige op mod det.

I en browser ville billedet nu være justeret til venstre; teksten ser ud til højre med mellemrum mellem de to.

Andre måder at opnå disse stilarter på

Du kan også fjerne klasseværdien af ​​billedet og style det med CSS ved at skrive en mere specifik vælger. I eksemplet nedenfor er billedet inde i en division med a hovedindhold klasseværdi.

Afsnittets tekst går her. I dette eksempel har vi et billede af et headshotfoto, så denne tekst beskriver muligvis personen i headshot.

For at style dette billede, skriv denne CSS:

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

I dette scenarie er billedet justeret til venstre, hvor teksten svæver omkring som før, men uden den ekstra klasseværdi i markeringen. At gøre dette i skala kan hjælpe med at oprette en mindre HTML-fil, som bliver lettere at administrere og kan forbedre ydeevnen.

Undgå indbyggede stilarter

Endelig kan du bruge inline stilarter:

Afsnittets tekst går her. I dette eksempel har vi et billede af et headshotfoto, så denne tekst beskriver muligvis personen i headshot.

Dette tilrådes dog ikke, fordi det kombinerer elementets stil med dets strukturelle markering. Bedste praksis dikterer, at sidens stil og struktur forbliver adskilt. Denne adskillelse er især nyttig, når du har brug for at ændre sidens layout og se efter forskellige skærmstørrelser og enheder med et responsivt websted.