Använd CSS Align Left för att sväva en webbplatsbild till vänster om texten

Element på blocknivå på en webbsida visas i sekventiell ordning. För att förbättra sidans utseende eller användbarhet kan du ändra ordningen genom att lägga in block, inklusive bilder, så att text flyter runt bilder.

I termer av webbdesign är denna effekt känd som flytande bilden. Detta uppnås med CSS-egendomflyta, som låter texten flöda runt den vänsterjusterade bilden till höger sida (eller runt en högerjusterad bild till vänster sida).

Börja med HTML

Detta exempel lägger till en bild i början av ett stycke (före texten men efter öppningen

märka). Här är den första HTML-markeringen:

Avsnittets text går här. I det här exemplet har vi en bild av ett headshotfoto, så den här texten kan beskriva personen i headshotet.

Som standard visas sidan med bilden ovanför texten, eftersom bilder är element på blocknivå i HTML. Detta innebär att webbläsaren visar radbrytningar före och efter bildelementet som standard. För att ändra det här standardutseendet med CSS, lägg till ett klassvärde (

vänster) till bildelementet för att fungera som en krok till vilken egenskaper kan fästas.

Avsnittets text går här. I det här exemplet har vi en bild av ett headshotfoto, så den här texten kan beskriva personen i headshotet.

Observera att den här klassen inte gör något på egen hand. CSS uppnår önskad stil.

Lägga till CSS-stilar

Lägg till den här regeln på webbplatsens stilark:

.vänster {
flyta till vänster;
stoppning: 0 20px 20px 0;
}

Denna stil flyter vad som helst med klassen vänster till vänster på sidan och lägger till lite stoppning till höger och botten av bilden så att texten inte stöter rakt mot den.

I en webbläsare skulle bilden nu justeras åt vänster; texten verkar till höger med mellanrum mellan de två.

Andra sätt att uppnå dessa stilar

Du kan också ta bort klassvärdet från bilden och utforma den med CSS genom att skriva en mer specifik väljare. I exemplet nedan är bilden inuti en uppdelning med a huvudinnehåll klassvärde.

Avsnittets text går här. I det här exemplet har vi en bild av ett headshotfoto, så den här texten kan beskriva personen i headshotet.

För att utforma den här bilden, skriv den här CSS:

.main-content img { 
flyta till vänster; 
stoppning: 0 20px 20px 0;
}

I det här scenariot justeras bilden till vänster, med texten som flyter runt som tidigare, men utan det extra klassvärdet i markeringen. Att göra detta i stor skala kan hjälpa till att skapa en mindre HTML-fil, vilket blir enklare att hantera och kan förbättra prestanda.

Undvik Inline Styles

Slutligen kan du använda inbyggda stilar:

Avsnittets text går här. I det här exemplet har vi en bild av ett headshotfoto, så den här texten kan beskriva personen i headshotet.

Detta är dock inte tillrådligt eftersom det kombinerar stilen hos ett element med dess strukturella markering. Bästa praxis dikterar att stil och struktur på en sida förblir separata. Denna segregering är särskilt användbar när du behöver ändra sidans layout och leta efter olika skärmstorlekar och enheter med en responsiv webbplats.