Potrebujete kodo za ovijanje besedila okoli slike? Običajno, ko ustvarite stran HTML, vse teče linearno, kar pomeni en blok neposredno za drugim. Vse moje prejšnje objave so primer tega, npr. Besedilo, slika, nato besedilo itd.
Včasih boste morda želeli vključiti besedilo poleg slike namesto pod sliko. To se imenuje ovijanje besedila okoli slike. Pravzaprav je precej enostavno prelomiti besedilo z uporabo HTML-ja. Upoštevajte, da za zavijanje besedila ni treba uporabljati CSS-ja.
Vendar te dni W3C priporoča uporabo CSS namesto HTML za te vrste nalog. Oba načina bom omenil spodaj, če pa lahko, je bolje uporabiti CSS, ker je bolj prilagodljiv za odzivne modele spletnih mest.
Prelomi besedilo okoli slike z uporabo HTML-ja
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Vpoklican nunc in lorem egestas non imperdiet enim congue.
Če želite, da se besedilo prelomi po desni strani slike, morate poravnati sliko v levo:
Vaše besedilo gre tukaj.
Če želite, da se besedilo prikaže na levi in da se slika prikaže na skrajni desni strani, spremenite parameter poravnave na »desno«.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Vpoklican nunc in lorem egestas non imperdiet enim congue.
Vaše besedilo gre tukaj.
To je to! Precej enostavno, kajne? CSS želite uporabiti le, če želite slikam dodati robove, tako da je med besedilom in sliko nekaj prostora.
Robove lahko dodate sliki z naslednjo kodo CSS:
Vaše besedilo gre tukaj.
Zgornja koda uporablja element MARGIN CSS za dodajanje 10 pikslov presledka na desni strani slike. Ker smo sliko poravnali levo, želimo dodati presledek v desno.
Štiri številke v bistvu predstavljajo TOP RIGHT BOTTOM LEFT. Če želite dodati prazen prostor sliki, ki je poravnana desno, bi to naredili:
Vaše besedilo gre tukaj.
Zato je dokaj preprosto uporabljati HTML za opravljanje te naloge, toda še enkrat, morda ne deluje dobro za odzivna spletna mesta.
Prelomi besedilo okrog slike s pomočjo CSS
Boljši način za ovijanje besedila okoli slike je uporaba CSS. Omogoča boljšo kontrolo zrn glede pozicioniranja elementov in boljše delovanje s sodobnimi standardi kodiranja.
Čeprav sem CSS vključil neposredno v slikovno oznako v primeru HTML, tudi vi tega ne smete več storiti. Namesto tega bi morali imeti ločeno datoteko, imenovano slogovna datoteka, ki vsebuje vso vašo kodo CSS.
V oznaki IMG preprosto dodelite razred oznaki in ji dodelite ime. V mojem primeru sem poimenoval razred levo . V moji slogovni listi moram le dodati naslednjo kodo:
.left {float: levo; oblazinjenje: 0 10px 0 0;} Kot lahko vidite, sem dodal 10 px oblazinjenja na desno stran levo poravnane slike. Uporabil sem tudi lastnost float, da premaknem sliko iz normalnega toka dokumenta in jo postavim na levo stran starševskega vsebnika.
Kot lahko vidite, je veliko čistejše od dodajanja celotne kode v samo oznako IMG. Prav tako je lažje upravljati in lahko uporabite veliko več lastnosti CSS, da prilagodite videz vaše spletne strani. Če imate kakršnakoli vprašanja, vas prosimo, da komentirate. Uživajte!
