Pomocí CSS Zarovnat vlevo můžete umístit obrázek webu vlevo od textu

Prvky na úrovni bloku na webové stránce se zobrazí v postupném pořadí. Chcete-li vylepšit vzhled nebo užitečnost stránky, můžete toto pořadí upravit zabalením bloků, včetně obrázků, tak text proudí kolem obrázků.

Z hlediska webového designu je tento efekt známý jako plovoucí obrázek. Toho je dosaženo pomocí Vlastnost CSSplovák, který umožňuje text obíhat kolem obrázku zarovnaného doleva na jeho pravou stranu (nebo kolem obrázku zarovnaného vpravo na jeho levou stranu).

Začněte s HTML

Tento příklad přidá obrázek na začátek odstavce (před text, ale po otevření)

štítek). Tady je počáteční značka HTML:

Text odstavce je uveden zde. V tomto příkladu máme obrázek headshotové fotografie, takže tento text může popisovat osobu ve headshotu.

Ve výchozím nastavení by se stránka zobrazovala s obrázkem nad textem, protože obrázky jsou prvky HTML na úrovni bloku. To znamená, že prohlížeč ve výchozím nastavení zobrazuje konce řádků před a za obrázkovým prvkem. Chcete-li změnit tento výchozí vzhled pomocí CSS, přidejte hodnotu třídy (

vlevo, odjet) k prvku obrázku, který slouží jako hák, ke kterému lze připojit vlastnosti.

Text odstavce je uveden zde. V tomto příkladu máme obrázek headshotové fotografie, takže tento text může popisovat osobu ve headshotu.

Tato třída nedělá nic sama o sobě. CSS dosáhne požadovaného stylu.

Přidávání stylů CSS

Přidejte toto pravidlo na stránky styl:

.vlevo, odjet {
plavat vlevo;
polstrování: 0 20px 20px 0;
}

Tento styl vznáší cokoli s třídou vlevo, odjet na levé straně stránky a trochu přidá polstrování napravo a dole na obrázku, aby se text nesrazil přímo proti němu.

V prohlížeči by nyní byl obrázek zarovnán doleva; text by se objevil napravo s mezerou mezi nimi.

Další způsoby, jak těchto stylů dosáhnout

Hodnotu třídy můžete také odebrat z obrázku a upravit ji pomocí CSS napsáním konkrétnějšího selektoru. V níže uvedeném příkladu je obrázek uvnitř dělení s a hlavní obsah hodnota třídy.

Text odstavce je uveden zde. V tomto příkladu máme obrázek headshotové fotografie, takže tento text může popisovat osobu ve headshotu.

Chcete-li stylovat tento obrázek, napište tento CSS:

.main-content img { 
plavat vlevo; 
polstrování: 0 20px 20px 0;
}

V tomto scénáři je obrázek zarovnán doleva, s textem plovoucím kolem něj jako dříve, ale bez hodnoty extra třídy v označení. Pokud to uděláte ve velkém, pomůže vám vytvořit menší soubor HTML, který bude snazší spravovat a může zlepšit výkon.

Vyhněte se vloženým stylům

Nakonec můžete použít inline styly:

Text odstavce je uveden zde. V tomto příkladu máme obrázek headshotové fotografie, takže tento text může popisovat osobu ve headshotu.

To však není vhodné, protože kombinuje styl prvku s jeho strukturálním označením. Osvědčené postupy diktují, že styl a struktura stránky zůstanou oddělené. Tato segregace je obzvláště užitečná, když potřebujete změnit rozložení stránky a hledat různé velikosti obrazovek a zařízení s responzivním webem.