WEBOVÁ STRÁNKA VYTVOŘENÁ PRO ZÁPOČET PŘEDMĚTU
TVORBA WWW STRÁNEK

Obtékání pomocí CSS

Ukázka poziciování obrázku v textu

<img src="../obr/obr_nahled_1.jpg" alt="zde zadame popis obrazku" height="96" width="150" class="img_left">

Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text.

<img src="../obr/obr_nahled_1.jpg" alt="zde zadame popis obrazku" height="96" width="150" class="img_right">

Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text.

Ukázka poziciování elementu v textu

Před tímto odstavcem jsou ve zdrojovém kódu umístěny dva obtékané bloky, umístěné k pravému okraji. První je kratší, druhý delší. Jelikož jsou oba úzké, druhý se vejde na zúžený řádek, jež zanechal první. Proto jsou v konečném důsledku oba bloky umístěny vedle sebe.

Obtékání se pochopitelně řídí tou hranou, která na daném řádku nejvíce zasahuje do prostoru stránky. V tomto případě to znamená, že text obtéká kolem druhého bloku, v jehož spodní polovině díky tomu napravo vzniká prázdné místo. Přestože to může působit podivně, taková jsou pravidla pro obtékání prvků a nedá se s tím nic dělat. Mějte proto na paměti, že pokud se výšky obtékaných prvků významněji liší, může výsledek působit zvláštně.

Složitější poziciování

Závěrečná část ilustruje, jak se v praxi uplatní pravidla pro obtékání, prokud je kombinace obtékaných objektů hodně divoká. Zkuste měnit šířku okna vašeho prohlížeče a pozorujte, jak se mění rozložení bloků na stránce.