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><!--//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="/c-tutorial/">C Pamācība</a> </li><li> <a href="/category/">Kategorija</a> </li><li> <a href="/sql-tutorial/">Sql Apmācība</a> </li><li> <a href="/java-file-handling/">Java Failu Apstrāde</a> </li><li> <a href="/python-csv/">Python-Csv</a> </li><li> <a href="/cpp-library/">Cpp-Bibliotēka</a> </li><li> <a href="/pandas-dataframe-program/">Pandas-Dataframe-Programma</a> </li><li> <a href="/python-regex/">Python-Regex</a> </li><li> <a href="/basic-coding-problems/">Pamata Kodēšanas Problēmas</a> </li><li> <a href="/canada-gk/">Kanāda G.k.</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Kā atrast STAAR izdotos testus?</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Vai meklējat STAAR prakses testus? Iepazīstieties ar mūsu ceļvedi par izdotajiem testiem un to, kā tos izmantot sagatavošanās procesā.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/how-do-you-find-staar-released-tests-1311040"> <i class="fa fa-external-link"></i> Lasīt Vairāk</a> </p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br />
</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-thrash">Kas ir Thrash?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/python-multiply-all-numbers-list">Python | Reiziniet visus skaitļus sarakstā</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/arrays-tostring-java-with-examples">Arrays.toString() Java ar piemēriem</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-an-ap-scholar-1311418">Kas ir AP Scholar? Priekšrocības un prasības</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/types-internet-protocols">Interneta protokolu veidi</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="/multiplexer">divi pret vienu multipleksoru</a>
</li><li><a href="/operators-java">java operators</a>
</li><li><a href="/java-localdatetime-class">java localdatetime</a>
</li><li><a href="/spring-boot-architecture">pavasara zābaku arhitektūra</a>
</li><li><a href="/how-sort-arraylist-java">kārtošana masīvu sarakstā java</a>
</li><li><a href="/npm-clear-cache">npm kešatmiņas tīrīšana</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="//nl.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>
|
