Potrebujete kód na obtekanie textu okolo obrázka? Normálne, keď vytvárate stránku HTML , všetko plynie lineárne, čo znamená, že jeden blok priamo za druhým. Všetky moje predchádzajúce príspevky sú toho príkladom, teda text, potom obrázok, potom text atď.

Niekedy možno budete chcieť pridať text vedľa obrázka namiesto pod ním. Toto sa nazýva obtekanie textu okolo obrázka. V skutočnosti je zalamovanie textu pomocou HTML^(HTML) pomerne jednoduché . Upozorňujeme, že na zalomenie textu nemusíte používať CSS .

V súčasnosti však W3C odporúča na tento druh úloh používať CSS namiesto HTML . Nižšie spomeniem obe metódy, ale ak môžete, je lepšie použiť CSS , pretože je lepšie prispôsobiteľné responzívnym dizajnom webových stránok.

Zalomenie textu okolo obrázka pomocou HTML

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc in lorem egestas non imperdiet enim congue.

Ak chcete, aby sa text zalomil pozdĺž pravej strany obrázka, musíte obrázok zarovnať doľava:

<img src="IMAGE URL" align="left" /><p>Your text goes here.</p>

Ak chcete, aby sa text objavil vľavo a obrázok úplne vpravo, stačí zmeniť parameter zarovnania na „vpravo“.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc in lorem egestas non imperdiet enim congue.

<img src="IMAGE URL" align="right" /><p>Your text goes here.</p>

To je všetko! Celkom^(Pretty) ľahké nie? CSS by ste chceli použiť iba vtedy, ak chcete k obrázkom pridať okraje, aby medzi textom a obrázkom zostal nejaký priestor.

Okraje môžete k obrázku pridať pomocou nasledujúceho kódu štýlu CSS :

<img src=”IMAGE URL” align=”left” style=”margin: 0px 10px 0px 0px;” /><p>Your text goes here.</p>

Vyššie uvedený kód používa prvok CSS MARGIN^{(MARGIN CSS)} na pridanie 10 pixelov medzier na pravú stranu obrázka. Keďže sme obrázok zarovnali doľava, chceme pridať medzeru doprava.

V zásade tieto štyri čísla predstavujú HORNÝ PRAVÝ DOL vľavo^{(TOP RIGHT BOTTOM LEFT)} . Ak teda chcete pridať biele miesto k obrázku zarovnanému doprava, postupujte takto:

<img src=”IMAGE URL” align=”right” style=”margin: 0px 0px 0px 10px;” /><p>Your text goes here.</p>

Takže je pomerne jednoduché použiť HTML na vykonanie tejto úlohy, ale opäť to nemusí fungovať dobre pre responzívne stránky.

Zalomenie textu okolo obrázka pomocou CSS

Lepší spôsob, ako obaliť text okolo obrázka, je použiť CSS . Poskytuje vám jemnejšiu kontrolu nad umiestnením prvkov a lepšie funguje s modernými štandardmi kódovania.

<img src="IMAGE URL" alt="A photo" class="left" />

Aj keď som v príklade HTML zahrnul ^(HTML)CSS priamo do značky obrázka , ani to by ste už nikdy nemali robiť. Namiesto toho by ste mali mať samostatný súbor s názvom šablóna so štýlmi, ktorý obsahuje celý váš kód CSS .

V IMG tagu jednoducho priradíte triedu tagu a pomenujete ho. V mojom príklade som triedu pomenoval left . V mojej šablóne so štýlmi stačí pridať nasledujúci kód:

.left {
 float: left;
 padding: 0 10px 0 0;}

Ako môžete vidieť, pridal som 10px výplne na pravú stranu obrázku zarovnaného doľava. Tiež som použil vlastnosť float na presunutie obrázka z normálneho toku dokumentu a jeho umiestnenie na ľavú stranu nadradeného kontajnera.

Ako vidíte, je to oveľa čistejšie ako pridávanie celého kódu do samotného tagu IMG . Je tiež jednoduchšia na správu a na prispôsobenie vzhľadu svojej webovej stránky môžete použiť oveľa viac vlastností CSS . Ak máte nejaké otázky, neváhajte ich komentovať. Užite si to!

HTML Code to Wrap Text Around Image

Need the code tо wrap text around аn image? Normally whеn yoυ crеate an HTML page, everything flows lineаrly, meaning one block direсtly after another. All of my previous posts are an example of this, i.e. text, then picture, then text, etc.

Sometimes you may want to include text next to an image instead of below it. This is called wrapping text around the image. It’s actually fairly easy to wrap text using HTML. Note that you don’t have to use CSS in order to wrap text.

However, these days the W3C recommends using CSS instead of HTML for these kinds of tasks. I’ll mention both methods below, but if you can, it’s better to use CSS since it’s more adaptable to responsive website designs.

Wrap Text Around Image using HTML

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc in lorem egestas non imperdiet enim congue.

In order to have the text wrap along the right side of the image, you have to align the picture to the left:

<img src="IMAGE URL" align="left" /><p>Your text goes here.</p>

If you want the text to appear on the left and the image to appear at the far right, just change the align parameter to “right”.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc in lorem egestas non imperdiet enim congue.

<img src="IMAGE URL" align="right" /><p>Your text goes here.</p>

That’s it! Pretty easy right? The only time you would want to use CSS is if you want to add margins to the pictures, so that there is some space between the text and the image.

You can add margins to a picture by using the following CSS styling code:

<img src=”IMAGE URL” align=”left” style=”margin: 0px 10px 0px 0px;” /><p>Your text goes here.</p>

The above code uses the MARGIN CSS element to add 10 pixels of whitespace on the right side of the image. Since we have aligned the image left, we want to add the whitespace to the right.

Basically, the four numbers represent TOP RIGHT BOTTOM LEFT. So if you want to add the white space to a right-aligned image, you would do this:

<img src=”IMAGE URL” align=”right” style=”margin: 0px 0px 0px 10px;” /><p>Your text goes here.</p>

So it’s fairly simple to use HTML to perform this task, but once again, it may not work well for responsive sites.

Wrap Text Around Image using CSS

The better way to wrap text around an image is to use CSS. It’s gives you more fine grain control over the positioning of the elements and works better with modern coding standards.

<img src="IMAGE URL" alt="A photo" class="left" />

Even though I included CSS directly into the image tag in the HTML example, you really should never do that anymore either. Instead, you should have a separate file called a stylesheet that holds all of your CSS code.

In the IMG tag, you simply assign a class to the tag and give it a name. In my example, I named the class left. In my stylesheet, all I have to do is add the following code:

.left {
 float: left;
 padding: 0 10px 0 0;}

As you can see, I added 10px of padding to the right side of the left-aligned image. I also used the float property to move the image out of the normal flow of the document and put it to the left side of the parent container.

As you can see, it’s much cleaner than adding all that code to the IMG tag itself. It’s also easier to manage and you can use a lot more CSS properties to customize the look on your webpage. If you have any questions, feel free to comment. Enjoy!

Related posts

• Ako naskenovať QR kód na zariadeniach iPhone a Android

• Ako tlačiť textové správy z Androidu

• Uložte zoznam spustených procesov do textového súboru v systéme Windows

• Ako sťahovať súbory a zobrazovať kód z GitHub

• Vyhľadávajte vo viacerých textových súboroch naraz

• Presmerujte výstup z príkazového riadka systému Windows do textového súboru

• 2 nástroje na vykonávanie spätného vyhľadávania obrázkov online

• Ako stiahnuť inštalátor prehliadača Google Chrome offline (samostatný).

• Oprava „Zariadenie sa nedá spustiť. (Kód 10)” Chyba

• Ako zobraziť zdrojový kód softvéru s otvoreným zdrojom

• Vypnite kontrolu používateľských účtov (UAC) pre konkrétnu aplikáciu

• Vytvorte zálohu obrazu systému Windows 10

• Ako udržiavať softvér počítača automaticky aktualizovaný

• Ako otvoriť uzamknutý súbor, keď ho používa iný program

• Ako zakriviť text vo Photoshope

• Ako otvoriť obrazové súbory EPS v systéme Windows

• Ako odstrániť text z ikon na paneli úloh systému Windows

• SynWrite Editor: Editor bezplatného textu a zdrojového kódu pre Windows 10

• Ako vykonať záťažový test CPU

• Extrahujte text z PDF a obrázkových súborov