logo

Kaip apvynioti tekstą aplink vaizdą naudojant HTML ir CSS?

Teksto apvyniojimas aplink vaizdą yra gana patrauklus bet kokiai svetainei. Naudojant HTML ir CSS apvynioti vaizdą tekstu galima ir yra daug būdų tai padaryti, nes bet kurio vaizdo forma nėra pastovi. Į HTML :

  • Taip pat galite naudoti CSS forma už nuosavybės ribų priklausomai nuo jūsų įvaizdžio formos.
  • Sulygiuokite vaizdus dešinėje, kairėje arba centre HTML, kad galėtumėte naudoti įvairius išdėstymus. Toliau pateikti pavyzdžiai iliustruoja aukščiau pateiktą metodą:

1 pavyzdys: Šiame pavyzdyje vaizdas plūduriuoja dešinėje ekrano pusėje, o tekstas apgaubia vaizdą. Čia nereikalaujame išorinės formos, nes formos vaizdas yra įprastas (kvadratas).

HTML






> <>html>>>> head>>>> <>title>>>> Wrapping an Image with the text> > Vaizdo apvyniojimas teksto pavadinimu><style>body { paraštė: 20 taškų; teksto lygiavimas: centre; } h1 { spalva: žalia; } /* Ši div dizaino dalis naudojama kaip vaizdas */ .round { width: 200px; aukštis: 200 pikselių; sienos spindulys: 50%; teksto lygiavimas: centre; šrifto dydis: 30 pikselių; plūdė: kairė; šrifto svoris: paryškintas; /* Pakeiskite formą pagal paveikslėlį */ shape-outside: circle(); fono spalva: žalia; spalva: balta; } straipsnis { padding-top: 75px; ekranas: eilutinis blokas; } p { text-align: justify; šrifto dydis: 22 pikseliai; } style> head> <body> <h1>techcodeview.comh1> <b>Kompiuterių mokslo portalas Geeks b><div> <article>techcodeview.comarticle> div><p>Kiek kartų buvote nusivylęs, kai ieškojote gero programavimo / algoritmo / interviu klausimų rinkinio? Ko tikėjotės ir ką gavote? Šis portalas buvo sukurtas siekiant pateikti gerai parašytus, gerai apgalvotus ir gerai paaiškintus pasirinktų klausimų sprendimus. IIT Roorkee absolventas ir techcodeview.com įkūrėjas. Jam patinka efektyviausiais būdais spręsti programavimo problemas. Be techcodeview.com, jis dirbo su DE Shaw ir Co kaip programinės įrangos kūrėjas ir JIIT Noida kaip docentas. Tai gera platforma mokytis programuoti. Tai edukacinė svetainė. Pasiruoškite įdarbinimo procesui su produktais pagrįstose įmonėse, pvz., „Microsoft“, „Amazon“, „Adobe“ ir kt., dalyvaudami nemokamuose internetinio pasirengimo stažuotėms kurse. p> body> html> Išvestis: 3 pavyzdys: Naudodami lentelės žymą sukursime lentelę, o lentelėse viename stulpelyje įdėsime vaizdą, o į kitą stulpelį bet kokią informaciją, kurią norite įterpti. HTML<html lang='en'> <head> <meta charset='UTF-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Tekstas aplink imagetitt> head> <body> <h1>text-align: centre;'> techcodeview.com h1><h3 style='color: black; text-align: center;'>Informatikos portalas h3> <br> <table class="table"> <tr> <td> <img src= ' ' alt="Longtail boat in Thailand">td><td> <p>Kiek kartų buvote nusivylęs, kai ieškojote gero programavimo / algoritmo / interviu klausimų rinkinio? Ko tikėjotės ir ką gavote? Šis portalas buvo sukurtas siekiant pateikti gerai parašytus, gerai apgalvotus ir gerai paaiškintus pasirinktų klausimų sprendimus. IIT Roorkee absolventas ir techcodeview.com įkūrėjas. Jam patinka efektyviausiais būdais spręsti programavimo problemas. Be techcodeview.com, jis dirbo su DE Shaw ir Co kaip programinės įrangos kūrėjas ir JIIT Noida kaip docentas. Tai gera platforma mokytis programuoti. Tai edukacinė svetainė. Pasiruoškite įdarbinimo procesui su produktais pagrįstose įmonėse, tokiose kaip „Microsoft“, „Amazon“, „Adobe“ ir kt., dalyvaudami nemokamuose internetinio pasirengimo stažuotėms kurse. p> td> tr> lentelė> kūnas> html> Išvestis :>></tag></td></tr></tbody></table></article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//spiritscaution.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article> </div><!--//content--> </div><!--//section-inner--> </section><!--//section--> </div><!--//primary--> <div class="secondary col-md-4 col-sm-12 col-xs-12"> <aside class="info aside section"> <div class="section-inner"> <h2 class="">Kategorija</h2> <div class="content"> <ul class="list-unstyled"> <li> <a href="/esports-gamers/">Esporto Žaidėjai</a> </li><li> <a href="/ansible-tutorial/">Ansible Tutorial</a> </li><li> <a href="/pandas-dataframe-program/">„Pandas-Dataframe-Program“.</a> </li><li> <a href="/interview-preparation/">Interviu-Pasiruošimas</a> </li><li> <a href="/cpp-functions/">Cpp Funkcijos</a> </li><li> <a href="/mockito-tutorial/">Mockito Pamoka</a> </li><li> <a href="/cpp-data-types/">Cpp-Duomenų Tipai</a> </li><li> <a href="/linux-networking/">Linux Tinklas</a> </li><li> <a href="/information-security/">Informacijos Saugumas</a> </li><li> <a href="/graphic-designing/">Grafinis Projektavimas</a> </li> </ul> </div><!--//content--> </div><!--//section-inner--> </aside><!--//aside--> <aside class="testimonials aside section"> <div class="section-inner"> <div class="content"> <div class="item"> <div class="rekl_placeholder" id="sidebar_placeholder_1"> <script type="text/javascript">atOptions = {'key' : 'f53f1abf3c3a788f849c12a956865db1','format' : 'iframe','height' : 300,'width' : 160,'params' : {}};</script><script type="text/javascript" src="//spiritscaution.com/f53f1abf3c3a788f849c12a956865db1/invoke.js"></script> <br></div> </div> </div> </div> <div class="section-inner"> <h2 class="heading">Kaip pakeisti matplotlib nupieštų figūrų dydį?</h2> <div class="content"> <div class="item"> <blockquote class="quote"> <span> <i class="fa fa-quote-left"></i> Kompiuterių mokslo portalas, skirtas geikams. Jame yra gerai parašyti, gerai apgalvoti ir gerai paaiškinti informatikos ir programavimo straipsniai, viktorinos ir praktikos / konkurencinio programavimo / įmonės interviu klausimai.</span> </blockquote> </div><!--//item--> <p> <a class="more-link" href="/how-change-size-figures-drawn-with-matplotlib"> <i class="fa fa-external-link"></i> Skaityti Daugiau</a> </p> </div><!--//content--> </div><!--//section-inner--> </aside><!--//section--> <aside class="languages aside section"> <div class="section-inner"> <h2 class="heading">Įdomios Straipsniai</h2> <div class="content"> <ul class="list-unstyled"> <li class="item"> <span class="title"> <strong> <a href="/check-if-a-number-is-palindromic-prime">Patikrinkite, ar skaičius yra „Palindromic Prime“</a> </strong> </span> </li><!--//item--><li class="item"> <span class="title"> <strong> <a href="/html-tags/">Html Žymos</a> </strong> </span> </li><!--//item--><li class="item"> <span class="title"> <strong> <a href="/chmod-command-linux-unix-with-examples">„Chmod“ komanda „Linux“ / „Unix“ su pavyzdžiais</a> </strong> </span> </li><!--//item--><li class="item"> <span class="title"> <strong> <a href="/downloading-gists-from-github-made-simple">Esminių duomenų atsisiuntimas iš „Github“ tapo paprastas</a> </strong> </span> </li><!--//item--><li class="item"> <span class="title"> <strong> <a href="/react-table">Reagavimo lentelė</a> </strong> </span> </li><!--//item--> </ul> </div><!--//content--> </div><!--//section-inner--> </aside><!--//section--> <aside class="list music aside section"> <div class="section-inner"> <h2 class="heading">Populiarios Temos</h2> <div class="content"> <ul class="list"> <li><a href="/java-string-replace">java pakeisti simbolį eilutėje</a> </li><li><a href="/who-invented-laptop">pirmasis nešiojamas kompiuteris</a> </li><li><a href="/npm-clear-cache">išvalyti talpyklą npm</a> </li><li><a href="/javafx-tutorial">jfx java pamoka</a> </li><li><a href="/alphabet-numbers">kas yra abėcėlės skaičius</a> </li><li><a href="/python-tkinter-button">tkinter mygtukas</a> </li> </ul> </div><!--//content--> </div><!--//section-inner--> </aside><!--//section--> </div><!--//secondary--> </div><!--//row--> </div><!--//masonry--> <footer class="footer"> <div class="container text-center"> <span> Copyright ©2025 Visos Teisės Saugomos | <a href="//it.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Atsisakymas</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Apie Mus</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Privatumo Politika</a> </span> </div> </footer> <script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/jquery-1.11.3.min.js"></script> <script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/bootstrap/js/bootstrap.min.js"></script> <script type="text/javascript" src="https://techcodeview.com/template/assets/js/main.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script> </body> </html>