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="//brunetteerdeplete.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="/java-string/">Java Virkne</a> </li><li> <a href="/microsoft-azure-tutorial/">Microsoft Azure Apmācība</a> </li><li> <a href="/b-tree/">B-Koks</a> </li><li> <a href="/groovy-tutorial/">Groovy Apmācība</a> </li><li> <a href="/data-structures-algorithms-qna/">Datu Struktūras Un Algoritmi-Qna</a> </li><li> <a href="/python-tuple/">Python-Korpuss</a> </li><li> <a href="/computer-networks-maq/">Datoru Tīkli-Maq</a> </li><li> <a href="/ai-ml-ds-with-r/">Ai-Ml-Ds Ar R</a> </li><li> <a href="/best/">Labākais</a> </li><li> <a href="/kruskal/">Kruskal</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="//brunetteerdeplete.com/f53f1abf3c3a788f849c12a956865db1/invoke.js"></script> <br></div> </div> </div> </div> <div class="section-inner"> <h2 class="heading">Git Origin Master</h2> <div class="content"> <div class="item"> <blockquote class="quote"> <span> <i class="fa fa-quote-left"></i> Git Origin Master ar Git apmācību, Git ievads, Git, kas ir Git, GitHub, kas ir GitHub, Git vs GitHub, Git Mercurial, Git instalēšana operētājsistēmai Windows, instalēšana Git for Ubuntu, Git vides iestatīšana, Git komandrindas rīki, Git Instrumenti utt.</span> </blockquote> </div><!--//item--> <p> <a class="more-link" href="/git-origin-master"> <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="/what-is-flapper-glamorous-history-women-1920s-131844">Kas ir Flapper? Krāšņā sieviešu vēsture 20. gadsimta 20. gados</a> </strong> </span> </li><!--//item--><li class="item"> <span class="title"> <strong> <a href="/javascript-json-objects">JavaScript JSON objekti</a> </strong> </span> </li><!--//item--><li class="item"> <span class="title"> <strong> <a href="/dot-net/">Dot-Net</a> </strong> </span> </li><!--//item--><li class="item"> <span class="title"> <strong> <a href="/informatica-tutorial/">Informātikas Apmācība</a> </strong> </span> </li><!--//item--><li class="item"> <span class="title"> <strong> <a href="/mutable-immutable-java">Mainīgs un nemainīgs Java</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-string-contains">satur virknē</a> </li><li><a href="/string-concatenation-java">savienojuma java virkne</a> </li><li><a href="/steps-write-execute-script">skriptu palaišana Linux sistēmā</a> </li><li><a href="/ram-pothineni">auns aktieris</a> </li><li><a href="/java-if-else-statement">java ja vēl</a> </li><li><a href="/kylie-jenner">Kylie Jenner brāļi un māsas</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="//sk.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>