Potrebujete kód na obalenie textu okolo obrázka? Normálne pri vytváraní stránky HTML všetko prúdi lineárne, čo znamená jeden blok priamo za druhým. Všetky moje predchádzajúce príspevky sú príkladom tohto, tj text, potom obrázok, potom text atď.
Niekedy možno budete chcieť vložiť text vedľa obrázka namiesto toho pod ním. Toto sa nazýva obalením textu okolo obrázka. V skutočnosti je jednoduché zabaliť text pomocou HTML. Všimnite si, že nemusíte používať CSS na zabalenie textu.
V týchto dňoch však W3C odporúča používať CSS namiesto HTML pre tieto druhy úloh. Spomeniem obidve metódy nižšie, ale ak je to možné, je lepšie používať CSS, pretože je viac prispôsobivý dizajnom webových stránok.
Zbaliť text okolo obrázka pomocou HTML
Lorem ipsum dolor sedí amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Ako sociálne natoque penatibus a magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc v lorem egestas non imperdiet enim congue.
Aby text bol zabalený pozdĺž pravej strany obrazu, musíte obrázok zarovnať doľava:
Váš text je tu.
Ak chcete, aby sa text zobrazil vľavo a obrázok sa zobrazil úplne vpravo, stačí zmeniť parameter zarovnania na "pravé".
Lorem ipsum dolor sedí amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Ako sociálne natoque penatibus a magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc v lorem egestas non imperdiet enim congue.
Váš text je tu.
To je ono! Docela jednoduché? Jediný čas, kedy by ste chceli používať CSS, je, ak chcete do obrázkov pridať okraje, takže medzi textom a obrázkom je určitý priestor.
Do obrázka môžete pridať okraje pomocou nasledujúceho štýlového kódu CSS:
Váš text je tu.
Vyššie uvedený kód používa prvok MARGIN CSS na pridanie 10 pixelov medzery na pravej strane obrázka. Keďže sme zarovnali obrázok doľava, chceme pridať prázdne miesto napravo.
V podstate štyri čísla predstavujú TOP RIGHT BOTTOM LEFT. Ak chcete pridať biely priestor do obrázku vpravo, urobte toto:
Váš text je tu.
Preto je pomerne jednoduché používať HTML na vykonanie tejto úlohy, ale znova to nemusí fungovať dobre pre reakčné stránky.
Zbaliť text okolo obrazu pomocou CSS
Lepší spôsob obloženia textu okolo obrázka je použitie CSS. Poskytuje vám jemnejšiu reguláciu zrnitosti pri umiestňovaní prvkov a lepšie pracuje s modernými kódovacími štandardmi.
Aj keď som zahrnul CSS priamo do značky obrázkov v príklade HTML, nikdy by ste to už nikdy nemali robiť. Namiesto toho by ste mali mať samostatný súbor nazývaný štýl, ktorý obsahuje celý kód CSS.
V značke IMG jednoducho priradíte značke značku a uveďte jej názov. V mojom príklade som označil triedu vľavo . V štýle môjho štýlu musím pridať nasledujúci kód:
.left {float: left; polstrovanie: 0 10px 0 0;} Ako môžete vidieť, pridala som 10px padding na pravej strane obrázku vľavo. Použil som aj vlastnosť float, aby sa obraz presunul z normálneho toku dokumentu a dal ho na ľavú stranu rodičovského kontajnera.
Ako vidíte, je to oveľa čistejšie ako pridanie celého kódu do samotnej značky IMG. Je tiež jednoduchšie spravovať a na prispôsobenie vzhľadu na vašej webovej stránke môžete použiť viac CSS vlastností. Ak máte akékoľvek otázky, neváhajte komentovať. Užite si to!
