Zistite, ako pomocou CSS zalomiť text okolo plávajúceho obrázka.
Ak chcete, aby sa váš text zalomil okolo obrázka napravo, podobne ako na fotografii, ktorá predstavuje tento článok, použite pravidlo CSS, ako je toto:
Pravidlo float: left spôsobí, že sa obrázok presunie na ľavý okraj. Pravidlo padding-right zabraňuje tomu, aby text narážal priamo na pravú stranu obrázka. Ak by sa k tomuto obrázku pridal okraj, medzi obrázok a okraj by sa dostala výplň. Informácie o práci s obrázkom s okrajom nájdete v časti 2.
Potom pridajte okraje naľavo a napravo od obrázka, aby ste ho vycentrovali. Správna hodnota pre ľavý a pravý okraj na vycentrovanie čohokoľvek je auto.
Na vytvorenie hrubého okraja podobného rámu pomocou štýlu okraja drážky je možné použiť pravidlo, ako je toto:
Ostatné štýly ohraničenia sú plné, bodkované, prerušované, dvojité, hrebeňové, vsadené a začiatočné. Šírka môže byť vyjadrená v pixeloch, ems alebo percentách.
Orámovanie je možné selektívne použiť na hornú, pravú, spodnú a ľavú stranu obrázka. Tieto znalosti môžete použiť na vytvorenie efektu ako vrhnutý tieň.
Použitím plného okraja v 2 odtieňoch sivej na pravom a spodnom okraji získate efekt vrhnutého tieňa.
img { float: left; border-right-style: pevné; border-right-width: 8px; border-right-color: #CCCCCC; okraj-dolný-štýl: pevný; border-bottom-width: 8px; border-bottom-color: #999999; pravý okraj: 1 em; okraj-dole: 1 em; }
Tip
Ak máte obrázky vo viacerých častiach (div) stránky, použite selektory potomkov na ich individuálny štýl. Možné selektory: #content img, #sidebar img, #feature img.
