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="/autocad-tutorial/">Autocad Apmācība</a> </li><li> <a href="/android-tips-tricks/">Android Padomu Triki</a> </li><li> <a href="/c-programs/">C Programmas</a> </li><li> <a href="/python-os-module/">Python-Os-Modulis</a> </li><li> <a href="/google-workspace/">Google Workspace</a> </li><li> <a href="/algorithms-analysis-algorithms/">Algoritmi – Algoritmu Analīze</a> </li><li> <a href="/html-dom/">Html-Dom</a> </li><li> <a href="/uncategorized/">Bez Kategorijas</a> </li><li> <a href="/sql-clauses-operators/">Sql Klauzulas-Operatori</a> </li><li> <a href="/english-blogs/">Angļu Emuāri</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">Ekspertu ceļvedis: cik reizes jums vajadzētu izmantot SAT?</h2> <div class="content"> <div class="item"> <blockquote class="quote"> <span> <i class="fa fa-quote-left"></i> Cik reizes jūs varat ņemt SAT? Var un vajadzētu ir ļoti dažādas lietas. Izlasiet mūsu ceļvedi, lai noskaidrotu, cik reižu ir par daudz.</span> </blockquote> </div><!--//item--> <p> <a class="more-link" href="/expert-guide-how-many-times-should-you-take-sat-1311444"> <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="/direction-at-last-square-block">Virziens pēdējā kvadrātveida blokā</a> </strong> </span> </li><!--//item--><li class="item"> <span class="title"> <strong> <a href="/linux-directories/">Linux Direktoriji</a> </strong> </span> </li><!--//item--><li class="item"> <span class="title"> <strong> <a href="/what-is-parent-brag-sheet-1311370">Kas ir vecāku lielīšanās lapa? Padomi un piemēri</a> </strong> </span> </li><!--//item--><li class="item"> <span class="title"> <strong> <a href="/top-10-most-popular-sports-canada">10 populārākie Kanādas sporta veidi</a> </strong> </span> </li><!--//item--><li class="item"> <span class="title"> <strong> <a href="/python-docstrings">Python dokumentu virknes</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="/java-convert-string-int">cast virkni uz int</a> </li><li><a href="/android-easter-egg">kas ir Android Lieldienu ola</a> </li><li><a href="/java-string-contains">virknē ir java</a> </li><li><a href="/java-convert-string-boolean">virkne uz Būla java</a> </li><li><a href="/advantages-disadvantages-electricity">elektrības priekšrocības</a> </li><li><a href="/grep-command-linux-unix-with-examples">grep komanda Linux</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="//it.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> <script> !function(){"use strict";let t=document.createElement("button");t.id="toTopBtn",t.innerHTML="↑";let e=` #toTopBtn { position: fixed; bottom: 25px; right: 25px; z-index: 9999; opacity: 0; visibility: hidden; background-color: #213141; color: white; border: none; border-radius: 8px; width: 50px; height: 50px; font-size: 24px; cursor: pointer; transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; } #toTopBtn:hover { background-color: #555; } `,i=document.createElement("style");i.type="text/css",i.innerText=e,document.head.appendChild(i),document.body.appendChild(t),window.addEventListener("scroll",()=>{let e=window.scrollY||document.documentElement.scrollTop;e>300?(t.style.opacity="1",t.style.visibility="visible"):(t.style.opacity="0",t.style.visibility="hidden")}),t.addEventListener("click",()=>{window.scrollTo({top:0,behavior:"smooth"})})}(); </script> </body> </html>