logo

Kā ietīt tekstu ap attēlu, izmantojot HTML un CSS?

Teksta ietīšana ap attēlu ir diezgan pievilcīga jebkura veida vietnei. Izmantojot HTML un CSS ir iespējams ietīt attēlu ar tekstu, un ir daudz veidu, kā to izdarīt, jo jebkura attēla forma nav nemainīga. In HTML :

  • Varat arī izmantot CSS forma ārpus īpašuma atkarībā no jūsu attēla formas.
  • Lai iegūtu dažādus izkārtojumus, izlīdziniet attēlus pa labi, pa kreisi vai centrā. Tālāk sniegtie piemēri ilustrē iepriekš minēto pieeju.

1. piemērs: Šajā piemērā attēls peld ekrāna labajā pusē, un teksts apņem attēlu. Šeit mēs nepieprasām formas ārēju rekvizītu, jo formas attēls ir parasts (kvadrātveida).

HTML






> <>html>>>> head>>>> <>title>>>> Wrapping an Image with the text> > Attēla iesaiņošana ar teksta nosaukumu><style>body { margin: 20px; teksta līdzināšana: centrs; } h1 { krāsa: zaļa; } /* Šī div dizaina daļa tiek izmantota kā attēls */ .round { width: 200px; augstums: 200 pikseļi; apmales rādiuss: 50%; teksta līdzināšana: centrs; fonta izmērs: 30 pikseļi; pludiņš: pa kreisi; fonta svars: treknrakstā; /* Mainīt formu atbilstoši attēlam */ shape-outside: circle(); fona krāsa: zaļa; krāsa: balta; } raksts { padding-top: 75px; displejs: inline-block; } p { text-align: justify; fonta izmērs: 22 pikseļi; } style> head> <body> <h1>techcodeview.comh1> <b>Datorzinātņu portāls Geeks b><div> <article>techcodeview.comarticle> div><p>Cik reizes jūs bijāt neapmierināts, meklējot labu programmēšanas/algoritma/intervijas jautājumu kolekciju? Ko jūs gaidījāt un ko jūs saņēmāt? Šis portāls ir izveidots, lai sniegtu labi uzrakstītus, pārdomātus un labi izskaidrotus risinājumus atlasītajiem jautājumiem. IIT Roorkee absolvents un techcodeview.com dibinātājs. Viņam patīk visefektīvākajā veidā risināt programmēšanas problēmas. Papildus techcodeview.com viņš ir strādājis ar DE Shaw and Co kā programmatūras izstrādātājs un JIIT Noida kā docents. Tā ir laba platforma programmēšanas apguvei. Tā ir izglītojoša vietne. Sagatavojieties darbā ar produktiem balstītu uzņēmumu, piemēram, Microsoft, Amazon, Adobe uc, atlasei, izmantojot bezmaksas tiešsaistes prakses sagatavošanas kursu. p> body> html> Izvade: 3. piemērs. Izmantojot tabulas tagu, mēs izveidosim tabulu, un tabulu iekšpusē vienā kolonnā ievietosim attēlu un citā kolonnā visu informāciju, ko vēlaties ievietot. 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>Teksts ap attēla nosaukumu> head> <body> <h1>text-align: center;'> techcodeview.com h1><h3 style='color: black; text-align: center;'>Datorzinātņu portāls h3> <br> <table class="table"> <tr> <td> <img src= ' ' alt="Longtail boat in Thailand">td><td> <p>Cik reizes jūs bijāt neapmierināts, meklējot labu programmēšanas/algoritma/intervijas jautājumu kolekciju? Ko jūs gaidījāt un ko jūs saņēmāt? Šis portāls ir izveidots, lai sniegtu labi uzrakstītus, pārdomātus un labi izskaidrotus risinājumus atlasītajiem jautājumiem. IIT Roorkee absolvents un techcodeview.com dibinātājs. Viņam patīk visefektīvākajā veidā risināt programmēšanas problēmas. Papildus techcodeview.com viņš ir strādājis ar DE Shaw and Co kā programmatūras izstrādātājs un JIIT Noida kā docents. Tā ir laba platforma programmēšanas apguvei. Tā ir izglītojoša vietne. Sagatavojieties darbā ar produktiem balstītu uzņēmumu, piemēram, Microsoft, Amazon, Adobe uc, atlasei, izmantojot bezmaksas tiešsaistes prakses sagatavošanas kursu. p> td> tr> tabula> body> html> Izvade :>></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="/figma/">Figma</a> </li><li> <a href="/uncategorized/">Bez Kategorijas</a> </li><li> <a href="/java-system-class/">Java Sistēmas Klase</a> </li><li> <a href="/dbms/">Dbms</a> </li><li> <a href="/commerce-types/">Tirdzniecības Veidi</a> </li><li> <a href="/c-file-handling/">C-Failu Apstrāde</a> </li><li> <a href="/atoms-ions/">Atomi Un Joni</a> </li><li> <a href="/linux-man-pages/">Linux Man Pages</a> </li><li> <a href="/yaml-tutorial/">Yaml Apmācība</a> </li><li> <a href="/english-word-play/">Angļu Vārdu Spēle</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">Kā Excel diagrammā uzzīmēt vairākas līnijas?</h2> <div class="content"> <div class="item"> <blockquote class="quote"> <p> <i class="fa fa-quote-left"></i> Datorzinātņu portāls dīķiem. Tajā ir labi uzrakstīti, pārdomāti un labi izskaidroti raksti par datorzinātnēm un programmēšanu, viktorīnas un prakses/konkurētspējīgas programmēšanas/uzņēmuma intervijas jautājumi.</p> </blockquote> </div><!--//item--> <p> <a class="more-link" href="/how-plot-multiple-lines-an-excel-graph"> <i class="fa fa-external-link"></i> Lasīt Vairāk</a> </p> </div><!--//content--> </div><!--//section-inner--> </aside><!--//section--> <aside class="languages aside section"> <div class="section-inner"> <h2 class="heading">Interesanti Raksti</h2> <div class="content"> <ul class="list-unstyled"> <li class="item"> <span class="title"> <strong> <a href="/how-add-text-boxes-google-docs">Kā pievienot tekstlodziņus Google dokumentos</a> </strong> </span> </li><!--//item--><li class="item"> <span class="title"> <strong> <a href="/100-easy-drawing-ideas-spark-your-inspiration-1318">100 vienkāršas zīmēšanas idejas, lai smeltos iedvesmu</a> </strong> </span> </li><!--//item--><li class="item"> <span class="title"> <strong> <a href="/how-fill-out-check-131396">Kā aizpildīt čeku, soli pa solim</a> </strong> </span> </li><!--//item--><li class="item"> <span class="title"> <strong> <a href="/html-comments">HTML komentāri</a> </strong> </span> </li><!--//item--><li class="item"> <span class="title"> <strong> <a href="/balanced-binary-search-tree">Līdzsvarota binārā meklēšanas koks</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">Populārākas Posts</h2> <div class="content"> <ul class="list"> <li><a href="/loop-c">cilpai c</a> </li><li><a href="/what-is-f5">kas ir f5 uz tastatūras</a> </li><li><a href="/how-find-out-my-monitor-size">cik liels ir mans datora ekrāns</a> </li><li><a href="/binary-tree-java">binārais koks java</a> </li><li><a href="/selection-sort-java">atlases kārtot java</a> </li><li><a href="/bash-while-loop">bash kamēr cilpa</a> </li><li><a href="/substring-java">java apakšvirkne</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 Visas Tiesības Aizsargātas | <a href="//pt.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Atruna</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Par Mums</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Privātuma 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>