Potřebujete kód pro obtékání textu kolem obrázku? Obvykle při vytváření stránky HTML plyne vše plynulé, což znamená jeden blok přímo za druhým. Veškeré mé předchozí příspěvky jsou příkladem toho, tj. Textu, pak obrázku, pak textu atd. Někdy může být místo textu umístěn vedle obrázku níže text. Toto se nazývá obtékání textu kolem obrázku. Ve skutečnosti je snadné zabalit text pomocí HTML. Všimněte si, že pro zalomení textu nemusíte používat CSS.
V těchto dnech však W3C doporučuje místo CSS používat CSS pro tyto druhy úkolů. Uvádím oba způsoby níže, ale pokud je to možné, je lepší používat CSS, protože je přizpůsobivější k citlivým návrhům webových stránek.
Zabalte text kolem obrázku pomocí HTML
Lorem ipsum dolor sedí podle toho, co se řídí emitováním. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tinkidunt sagittis. Cum socialis natoque penatibus et magnis des parturient montes, nascetur ridiculus mus. Dotazujte se na to, co se vám líbí. Curabitur molestie posuere laoreet.
Chcete-li, aby text byl zabalen podél pravé strany obrázku, musíte zarovnat obrázek doleva:
<img itemprop="image" data-original="IMAGE URL" align="left" /><p>Your text goes here.</p>
Chcete-li, aby se text objevil vlevo a obrázek se objevil napravo, změňte parametr zarovnání na "pravý".
/ s>
Lorem ipsum dolor sedět amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tinkidunt sagittis. Cum socialis natoque penatibus et magnis des parturient montes, nascetur ridiculus mus. Dotazujte se na to, co se vám líbí. Curabitur molestie posuere laoreet. Ut pellentesque nunc v lorem egestas non imperdiet enim congue.
<img itemprop="image" data-original="IMAGE URL" align="right" /><p>Your text goes here.</p>
To je ono! Docela snadné? Jediný čas, kdy byste chtěli používat CSS, je, chcete-li do obrázků přidat okraje, takže mezi textem a obrázkem je nějaký prostor.
Okraje lze přidávat do obrázku pomocí následující kódovací styl CSS:
<img itemprop="image" data-original=”IMAGE URL” align=”left” style=”margin: 0px 10px 0px 0px;” /><p>Your text goes here.</p>
Výše uvedený kód používá prvek MARGIN CSS pro přidání 10 pixelů bílé barvy na pravé straně obrázku. Protože jsme zarovnávali obrázek doleva, chceme přidat prázdné místo.
V podstatě jsou čtyři čísla TOP RIGHT BOTTOM LEFT. Takže pokud chcete přidat bílý prostor do obrázku vpravo, měli byste to udělat:
<img itemprop="image" data-original=”IMAGE URL” align=”right” style=”margin: 0px 0px 0px 10px;” /><p>Your text goes here.</p>
Takže je poměrně jednoduché použít HTML k provedení této úlohy, ale jednou zase nemusí fungovat dobře pro citlivé stránky.
Omotat text kolem obrázku pomocí CSS
Lepší způsob obtékání textu kolem obrázku je použití CSS. To vám dává jemnější kontrolu nad zorným polohováním prvků a lépe pracuje s moderními normami pro kódování. I když jsem zahrnul CSS přímo do značky obrázků v příkladu HTML , opravdu byste to už nikdy neměli dělat. Místo toho byste měli mít samostatný soubor nazvaný stylu, který obsahuje celý kód CSS.
V tagu IMG jednoduše přiřadíte značce značky a udělejte její jméno. Ve svém příkladu jsem jmenoval třídu vlevo. V mém stylu se stačí přidat následující kód:
.left {
float: left;
padding: 0 10px 0 0;}
Jak vidíte, přidal jsem 10px polstrování na pravou stranu levého obrázku . Také jsem použil vlastnost float pro přesunutí obrazu z normálního toku dokumentu a dal ho na levou stranu rodičovského kontejneru. Jak vidíte, je to mnohem čistší než přidání celého kódu na samotnou značku IMG. Je také snadnější spravovat a pro přizpůsobení vzhledu na vaší webové stránce můžete použít mnohem více vlastností CSS. Máte-li jakékoli dotazy, neváhejte se k tomu vyjádřit. Užijte si!