Треба вам код за премотавање текста око слике? Обично када креирате ХТМЛ^(HTML) страницу, све тече линеарно, што значи један блок директно за другим. Сви моји претходни постови су пример овога, тј. текст, па слика, па текст итд.

Понекад ћете можда желети да укључите текст поред слике уместо испод ње. Ово се зове премотавање текста око слике. Заправо је прилично лако премотати текст помоћу ХТМЛ^(HTML) -а . Имајте на уму да не морате да користите ЦСС^(CSS) да бисте премотали текст.

Међутим, ових дана В3Ц^(W3C) препоручује коришћење ЦСС^(CSS) -а уместо ХТМЛ^(HTML) -а за ове врсте задатака. У наставку ћу поменути обе методе, али ако можете, боље је да користите ЦСС^(CSS) јер је прилагодљивији дизајну веб локација.

Премотајте текст око слике користећи ХТМЛ

Лорем^(Lorem) ипсум долор сит амет, цонсецтетур адиписцинг елит. Фусце^(Fusce) дицтум гравида еним, куис ултрициес маурис посуере куис. Дуис^(Duis) адиписцинг тинцидунт сагиттис. Цум^(Cum) социис натокуе пенатибус ет магнис дис партуриент монтес, насцетур ридицулус мус. Аликуам а фелис ​​витае аугуе лобортис дицтум. Цурабитур молестие посуере^(Curabitur) лаореет. Ут пеллентескуе нунц ин лорем егестас нон импердиет еним цонгуе.

Да би се текст премотао дуж десне стране слике, морате да поравнате слику са леве стране:

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

Ако желите да се текст појави на левој страни, а слика да се појави крајње десно, само промените параметар поравнања у „десно“.

Лорем^(Lorem) ипсум долор сит амет, цонсецтетур адиписцинг елит. Фусце^(Fusce) дицтум гравида еним, куис ултрициес маурис посуере куис. Дуис^(Duis) адиписцинг тинцидунт сагиттис. Цум^(Cum) социис натокуе пенатибус ет магнис дис партуриент монтес, насцетур ридицулус мус. Аликуам а фелис ​​витае аугуе лобортис дицтум. Цурабитур молестие посуере^(Curabitur) лаореет. Ут пеллентескуе нунц ин лорем егестас нон импердиет еним цонгуе.

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

То је то! Прилично^(Pretty) лако, зар не? Једини пут када бисте желели да користите ЦСС^(CSS) је ако желите да додате маргине сликама, тако да постоји размак између текста и слике.

Можете додати маргине на слику користећи следећи ЦСС^(CSS) стилски код:

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

Горњи код користи МАРГИН ЦСС^{(MARGIN CSS)} елемент за додавање 10 пиксела размака на десној страни слике. Пошто смо поравнали слику лево, желимо да додамо размак десно.

У основи, четири броја представљају ГОРЕ ДЕСНО ДОЉЕ ЛЕВО^{(TOP RIGHT BOTTOM LEFT)} . Дакле, ако желите да додате бели простор десно поравнатој слици, урадили бисте ово:

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

Дакле, прилично је једноставно користити ХТМЛ^(HTML) за обављање овог задатка, али још једном, можда неће добро функционисати за веб локације које реагују.

Премотајте текст око слике користећи ЦСС

Бољи начин за премотавање текста око слике је коришћење ЦСС^(CSS) -а . Даје вам бољу контролу над позиционирањем елемената и боље функционише са модерним стандардима кодирања.

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

Иако сам укључио ЦСС^(CSS) директно у ознаку слике у ХТМЛ^(HTML) примеру, ни то више никада не би требало да радите. Уместо тога, требало би да имате засебну датотеку која се зове стилска листа која садржи сав ваш ЦСС^(CSS) код.

У ИМГ^(IMG) ознаци, једноставно доделите класу ознаци и дате јој име. У мом примеру сам класу назвао лево^(left) . У моју листу стилова, све што треба да урадим је да додам следећи код:

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

Као што можете да видите, додао сам 10 пиксела одлагања на десну страну слике поравнате лево. Такође сам користио својство флоат да померим слику из нормалног тока документа и ставим је на леву страну родитељског контејнера.

Као што видите, много је чистије од додавања целог тог кода у саму ИМГ^(IMG) ознаку. Такође је лакше управљати и можете користити много више ЦСС^(CSS) својстава да бисте прилагодили изглед ваше веб странице. Ако имате било каквих питања, слободно коментаришите. Уживати!

HTML Code to Wrap Text Around Image

Need the code to wrap text around an image? Normally when you create an HTML page, everythіng flows linearly, meаning one block directly after another. All of my previoυs posts are an example of this, i.e. text, then picture, then text, еtс.

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

• Како скенирати КР код на иПхоне-у и Андроид-у

• Како штампати текстуалне поруке са Андроид-а

• Сачувајте листу покренутих процеса у текстуалну датотеку у оперативном систему Виндовс

• Како преузети датотеке и погледати код са ГитХуб-а

• Претражујте у више текстуалних датотека одједном

• Како да ваш Виндовс рачунар буде будан без додиривања миша

• Како погледати изворни код софтвера отвореног кода

• Како да креирате и скенирате Спотифи код

• Како отворити ХТМЛ датотеку у Гоогле Цхроме-у

• Како направити тим у Мицрософт тимовима

• Извуците текст из ПДФ и сликовних датотека

• Искључите контролу корисничког налога (УАЦ) за одређену апликацију

• Како закривити текст у Пхотосхопу

• Како додати музику у Гоогле слајдове

• 8 најбољих технолошких идеја за суочавање са самоизолацијом

• Уклоните текстуалне ознаке са икона на радној површини у оперативном систему Виндовс 7/8/10

• Како пренети текстуалне поруке са иПхоне-а на Андроид

• Како уградити ХТМЛ у Гоогле документ

• СинВрите Едитор: бесплатни уређивач текста и изворног кода за Виндовс 10

• 2 алата за обављање обрнутих претрага слика на мрежи