Naučte se, jak vytvořit obtékání textu kolem plovoucího obrázku pomocí CSS.
Chcete-li, aby se text obtékal kolem obrázku vpravo, podobně jako na fotografii uvádějící tento článek, použijte pravidlo CSS, jako je toto:
Pravidlo float: left způsobí, že se obrázek přesune k levému okraji. Pravidlo padding-right zabraňuje tomu, aby se text narážel přímo na pravou stranu obrázku. Pokud byl k tomuto obrázku přidán okraj, mezi obraz a okraj by se dostal výplň. Informace o práci s obrázkem s okrajem naleznete v části 2.
Dále přidejte okraje nalevo a napravo od obrázku, abyste jej vystředili. Správná hodnota pro levý a pravý okraj pro vystředění čehokoli je auto.
Chcete-li vytvořit tlustý rámový okraj pomocí stylu okraje drážky, lze použít pravidlo, jako je toto:
Ostatní styly ohraničení jsou plné, tečkované, čárkované, dvojité, hřebenové, vsazené a začátky. Šířka může být vyjádřena v pixelech, ems nebo procentech.
Ohraničení lze selektivně použít na horní, pravou, spodní a levou část obrázku. Tyto znalosti můžete použít k vytvoření efektu, jako je vržený stín.
Použitím plného okraje ve 2 odstínech šedé na pravém a spodním okraji získáte efekt vrženého stínu.
img { float: left; border-right-style: solid; border-right-width: 8px; border-right-color: #CCCCCC; border-bottom-style: solid; border-bottom-width: 8px; border-bottom-color: #999999; pravý okraj: 1 em; okraj-dole: 1 em; }
Spropitné
Máte-li obrázky ve více než jednom oddílu (div) stránky, použijte k jejich individuálnímu stylu selektory potomků. Možné selektory: #content img, #sidebar img, #feature img.
