Potřebujete kód, který zabalí text kolem obrázku? Normálně, když vytváříte HTML stránku, vše teče lineárně, což znamená jeden blok přímo za druhým. Všechny mé předchozí příspěvky jsou toho příkladem, tj. Text, pak obrázek, pak text atd.
Někdy můžete chtít zahrnout text vedle obrázku namísto pod ním. Toto se nazývá obtékání textu kolem obrázku. Je to vlastně docela snadné zabalit text pomocí HTML. Chcete-li zalamovat text, nemusíte používat CSS.
V těchto dnech však W3C doporučuje pro tyto druhy úkolů používat CSS místo HTML. Zmíním obě metody uvedené níže, ale pokud můžete, je lepší použít CSS, protože je přizpůsobivější pro citlivé návrhy webových stránek.
Zabalit text kolem obrázku pomocí HTML
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc v lorem egestas non imperdiet enim congue.
Chcete-li text zalomit na pravé straně obrázku, musíte obrázek zarovnat doleva:
Tady jde tvůj text.
Pokud chcete, aby se text zobrazoval vlevo a obraz se zobrazoval zcela vpravo, změňte parametr zarovnání na hodnotu „vpravo“.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc v lorem egestas non imperdiet enim congue.
Tady jde tvůj text.
A je to! Docela snadné? Jediný čas, kdy chcete použít CSS, je přidat okraje do obrázků tak, aby mezi textem a obrázkem byl nějaký prostor.
K obrázku můžete přidat okraje pomocí následujícího stylingového kódu CSS:
Tady jde tvůj text.
Výše uvedený kód používá prvek MARGIN CSS k přidání 10 pixelů mezer na pravé straně obrázku. Vzhledem k tomu, že jsme obrázek zarovnali doleva, chceme přidat mezeru vpravo.
Čtyři čísla představují v podstatě TOP PRAVÁ LOMA. Pokud tedy chcete přidat bílé místo do obrázku zarovnaného doprava, postupujte takto:
Tady jde tvůj text.
Takže je poměrně jednoduché použít HTML k provedení tohoto úkolu, ale opět nemusí fungovat dobře pro citlivé stránky.
Zabalit text kolem obrázku pomocí CSS
Lepší způsob, jak zabalit text kolem obrázku, je použití CSS. To vám dává jemnější kontrolu nad polohováním prvků a pracuje lépe s moderními standardy kódování.
I když jsem do ukázky HTML v příkladu HTML zahrnula CSS přímo, neměli byste to nikdy dělat. Místo toho byste měli mít samostatný soubor nazvaný šablona stylů, která obsahuje celý kód CSS.
Ve značce IMG jednoduše přiřadíte tagu tag a přidáte mu jméno. V mém příkladu jsem jmenoval třídu vlevo . Všechno, co musím udělat, je přidat následující kód:
.left {float: vlevo; polstrování: 0 10px 0 0;} Jak vidíte, přidal jsem 10px výplně na pravou stranu levotočivého obrazu. Také jsem použil vlastnost float pro přesunutí obrázku z normálního toku dokumentu a jeho umístění na levou stranu nadřazeného kontejneru.
Jak vidíte, je to mnohem čistší než přidávání tohoto kódu do tagu IMG. Je také snazší jej spravovat a pro přizpůsobení vzhledu vaší webové stránky můžete použít mnohem více vlastností CSS. Máte-li jakékoli dotazy, neváhejte se vyjádřit. Užívat si!
