Jak plavat obrázek nalevo od textu na webové stránce

Použití CSS pro zarovnání obrázku na levé straně rozvržení webové stránky

Podívejte se na téměř každou webovou stránku a uvidíte kombinaci textu a obrázků tvořících většinu těchto stránek. Je velmi snadné přidat text a obrázky na stránku . Text je kódován pomocí standardních značek HTML, jako jsou odstavce, seznamy a nadpisy, zatímco obrázky jsou součástí elementu .

Schopnost udělat tento text a ty snímky dobře spolupracovat je to, co dělá skvělé webové designéry od sebe! Nechcete, aby se váš text a obrázky zobrazovaly jeden po druhém, což je způsob, jakým budou tyto prvky na úrovni bloku ve výchozím nastavení rozvržení. Ne, chcete mít nějakou kontrolu nad tím, jak text a obrázky proudí dohromady v tom, co nakonec bude vaším webovým vizuálním designem.

S obrázkem, který je zarovnán s levou stranou stránky, zatímco text této stránky protéká, je běžným designovým zpracováním pro tištěný design i pro webové stránky. Ve webových termínech je tento efekt znám jako plovoucí obraz . Tento styl je dosažen vlastností CSS pro "float". Tato vlastnost umožňuje, aby text procházel kolem levého obrázku na pravou stranu. (Nebo kolem pravého obrázku na levé straně.) Podívejme se na to, jak dosáhnout tohoto vizuálního efektu.

Začněte s HTML

První věc, kterou budete muset udělat, je mít nějaký HTML, s nímž budete pracovat. Pro náš příklad zapíšeme text odstavce a přidáme obrázek na začátek odstavce (před textem, ale po otevření

tagu). Zde vypadá, jak vypadá značka HTML:

Text tohoto odstavce je zde. V tomto příkladu máme obrázek o headshotové fotografii, takže tento text by se pravděpodobně týkal osoby, pro kterou je záhlaví určeno.

Ve výchozím nastavení by se naše stránka zobrazovala s obrázkem nad textem. Je to proto, že obrázky jsou elementy na úrovni bloku v HTML. To znamená, že prohlížeč zobrazuje před a po prvek obrázku výchozí řádky. Tento výchozí vzhled změníme otočením na CSS. Nejprve však do prvku image přidáme hodnotu třídy . Tato třída bude fungovat jako "hák", který budeme používat v našem CSS později.

Text tohoto odstavce je zde. V tomto příkladu máme obrázek o headshotové fotografii, takže tento text by se pravděpodobně týkal osoby, pro kterou je záhlaví určeno.

Všimněte si, že tato třída "vlevo" vůbec nic nečiní! Abychom dosáhli požadovaného stylu, potřebujeme použít CSS dále.

Styly CSS

S našimi HTML na místě, včetně našeho atribut třídy "vlevo", můžeme nyní obrátit na CSS. Do našeho šablony stylů bychom přidali pravidlo, které by tento obrázek vznášelo a přidávalo vedle něj malý polštář tak, aby text, který se nakonec obtočí kolem obrazu, příliš neohýbal. Zde je CSS, které můžete napsat:

.left {float: left; polstrování: 0 20px 20px 0; }}

Tento styl vznáší tento obrázek doleva a přidá malé polstrování (pomocí některé zkratky CSS) vpravo a v dolní části obrázku.

Pokud jste v prohlížeči prohlížili stránku, která obsahuje tento kód HTML, obrázek bude nyní zarovnán doleva a text odstavce se objeví napravo s odpovídajícím rozestupem mezi těmito dvěma. Všimněte si, že hodnota třídy "left", kterou jsme použili, je libovolná. Mohli jsme jí říkat cokoli, protože pojem "vlevo" nic neudělal sám. Toto musí mít atribut třídy v HTML, který pracuje se stávajícím stylem CSS, který určuje vizuální změny, které chcete vyvíjet.

Alternativní cesty k dosažení těchto stylů

Tento přístup dává prvku obrázku atribut třídy a pak pomocí obecného stylu CSS, který vznáší prvek, je pouze jeden způsob, jak můžete tento vzhled "levého zarovnaného obrazu" dosáhnout. Můžete také vzít hodnotu třídy mimo obrázek a upravit její styl pomocí CSS psaním konkrétnějšího výběru. Podívejme se například na příklad, kdy je tento obraz uvnitř divize s hodnotou třídy "main-content".