Нуждаете се от кода, за да обвиете текст около изображение? Обикновено, когато създавате HTML страница, всичко протича линейно, което означава един блок директно след друг. Всичките ми предишни публикации са пример за това, т.е. текст, след това картина, след това текст и т.н.

Понякога може да искате да включите текст до изображение, вместо под него. Това се нарича обвиване на текст около изображението. Всъщност е доста лесно да се обвие текст с помощта на HTML . Имайте предвид, че не е нужно да използвате CSS , за да обвиете текст.

Въпреки това, тези дни W3C препоръчва използването на CSS вместо HTML за тези видове задачи. Ще спомена и двата метода по-долу, но ако можете, по-добре е да използвате CSS , тъй като е по-приспособим към адаптивния дизайн на уебсайтове.

Обвиване на текст около изображение с помощта на 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.

За да може текстът да се обвие от дясната страна на изображението, трябва да подравните картината вляво:

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

Ако искате текстът да се показва отляво, а изображението да се показва най-вдясно, просто променете параметъра за подравняване на „вдясно“.

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>

Това е! Доста^(Pretty) лесно нали? Единственият път, когато бихте искали да използвате CSS , е ако искате да добавите полета към снимките, така че да има малко пространство между текста и изображението.

Можете да добавите полета към картина, като използвате следния CSS код за стил:

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

Горният код използва CSS^{(MARGIN CSS)} елемента MARGIN, за да добави 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

По-добрият начин да обвиете текст около изображение е да използвате CSS . Той ви дава по-фин контрол върху позиционирането на елементите и работи по-добре със съвременните стандарти за кодиране.

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

Въпреки че включих CSS директно в маркера на изображението в HTML примера, наистина никога не трябва да правите това вече. Вместо това трябва да имате отделен файл, наречен stylesheet, който съдържа целия ви CSS код.

В IMG тага просто присвоявате клас на етикета и му давате име. В моя пример кръстих класа left . В моята таблица със стилове всичко, което трябва да направя, е да добавя следния код:

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

Както можете да видите, добавих 10px отстъп към дясната страна на подравненото вляво изображение. Също така използвах свойството float, за да преместя изображението от нормалния поток на документа и да го сложа от лявата страна на родителския контейнер.

Както можете да видите, това е много по-чисто от добавянето на целия този код към самия 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, everything flows linearly, meaning one block directly after another. All of my previous poѕts аre 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

• Как да сканирате QR код на iPhone и Android

• Как да отпечатате текстови съобщения от Android

• Запазете списък с изпълнявани процеси в текстов файл в Windows

• Как да изтегляте файлове и да преглеждате код от GitHub

• Търсене в няколко текстови файла наведнъж

• Как да премахнете текст от иконите в лентата на задачите на Windows

• Пренасочване на изхода от командния ред на Windows към текстов файл

• Безплатни онлайн OCR сайтове и услуги за извличане на текст от изображение

• Как да свържете текстови полета в Adobe InDesign

• Как да добавите сянка към текст или изображение в GIMP

• Как да деактивирате ключа на Windows

• SynWrite Editor: безплатен редактор на текст и изходен код за Windows 10

• Преобразувайте текст в HTML или XHTML с MarkdownPad за компютър с Windows

• Как да правите екранни снимки на Nintendo Switch

• Как да създадете екип в Microsoft Teams

• Как да отворите EPS изображения на Windows

• Как бързо да увиете текст в Google Sheets?

• Незабавно премахване на фонове от изображения с помощта на AI

• Как да извършите стрес тест на процесора

• Как да създадете и сканирате Spotify код