Norint koduoti tekstą aplink vaizdą, reikia kodo? Paprastai, kai kuriate HTML puslapį, viskas teka tiesiškai, o tai reiškia, kad vienas blokas yra tiesiogiai po kito. Visi mano ankstesni įrašai - tai pavyzdys, pvz., Tekstas, paveikslėlis, tada tekstas ir tt
Kartais galbūt norėsite įtraukti tekstą šalia nuotraukos, o ne žemiau. Tai vadinama įvyniojimo tekstu aplink vaizdą. Tai tikrai gana paprasta įvynioti tekstą naudojant HTML. Atkreipkite dėmesį, kad teksto suvynioti nereikia naudoti CSS.
Tačiau šiomis dienomis W3C rekomenduoja naudoti tokias užduotis CSS, o ne HTML. Aš paminėsiu abu žemiau pateiktus metodus, bet jei galite, geriau naudoti CSS, nes ji labiau pritaikyta prie tinkamų svetainės dizainų.
Naudodami HTML naudokite tekstą aplink vaizdą
„Lorem ipsum dolor sit amet, consectetur 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. „Ut pellentesque nunc in lorem egestas non imperdiet enim congue“.
Norint, kad tekstas būtų apipavidalintas dešinėje vaizdo pusėje, turite suderinti paveikslėlį į kairę:
Jūsų tekstas čia.
Jei norite, kad tekstas būtų rodomas kairėje, o vaizdas būtų rodomas dešinėje, tiesiog pakeiskite lygiavimo parametrą į „teisę“.
„Lorem ipsum dolor sit amet, consectetur 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. „Ut pellentesque nunc in lorem egestas non imperdiet enim congue“.
Jūsų tekstas čia.
Viskas! Gana paprasta? Vienintelis laikas, kurį norite naudoti CSS, yra, jei norite pridėti paraštes nuotraukoms, kad tarp teksto ir vaizdo būtų šiek tiek vietos.
Nuotraukai galite pridėti paraštes naudodami šį CSS stiliaus kodą:
Jūsų tekstas čia.
Anksčiau minėtas kodas naudoja MARGIN CSS elementą, kad dešinėje vaizdo pusėje būtų pridėti 10 taškų erdvės. Kadangi suderinome vaizdą kairėje, norime pridėti tuščią erdvę į dešinę.
Iš esmės, šie keturi skaičiai yra TOP RIGHT BOTTOM LEFT. Taigi, jei norite pridėti baltą erdvę į dešinę nukreiptą vaizdą, tai atliktumėte:
Jūsų tekstas čia.
Todėl gana paprasta naudoti HTML, kad atliktumėte šią užduotį, bet vėlgi, ji gali neveikti gerai reaguojančioms svetainėms.
Wrap Teksto aplink vaizdą naudojant CSS
Geresnis būdas įvesti tekstą aplink vaizdą yra naudoti CSS. Tai suteikia jums daugiau smulkių grūdų kontrolės elementų padėties ir veikia geriau su šiuolaikiniais kodavimo standartais.
Nors CSS tiesiogiai įtraukiau į HTML pavyzdžio vaizdo žymę, jūs taip pat neturėtumėte to daryti. Vietoj to, turėtumėte turėti atskirą failą, vadinamą stilių lentele, turinčiu visą CSS kodą.
IMG žyma paprasčiausiai priskiria žymeniui klasę ir suteikia jai pavadinimą. Mano pavyzdžiu aš pavadinčiau klasę kairėje . Mano stiliaus lape viskas, ką turiu padaryti, yra pridėti šį kodą:
.left {float: kairėje; įdėklas: 0 10px 0 0;} Kaip matote, dešinėje kairiosios nuotraukos pusėje pridėjau 10 pikselių. Aš taip pat naudoju plūdės savybę, kad vaizdas būtų perkeliamas iš įprastinio dokumento srauto ir įdėjau į kairę pagrindinio konteinerio pusę.
Kaip matote, tai daug švaresnis, nei pridėti visą tą kodą į IMG žymę. Taip pat lengviau valdyti ir galite naudoti daug daugiau CSS savybių, kad tinkintumėte savo tinklalapio išvaizdą. Jei turite klausimų, galite komentuoti. Mėgautis!
