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

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

Добавянето на текст и изображения към уеб сайтове е лесно. Текстът се добавя със стандартни HTML тагове като параграфи, заглавия и списъци, докато изображенията се поставят на страница с елемента . След като добавите изображение към уеб страницата си обаче, може да искате текстът да се придвижва до изображението, а не да се подравнява под него (което е по подразбиране начина, по който изображението, добавено към HTML кода ще се изобрази в браузъра). Технически, можете да постигнете този вид, като използвате CSS (препоръчително) или като добавите визуалните инструкции директно в HTML (не се препоръчва, тъй като искате да запазите отделянето на стила и структурата на уебсайта си).

Използване на CSS

Правилният начин да промените начина на оформление на текста и изображенията на страницата и как се показват визуалните й стилове в браузъра е с CSS . Само не забравяйте, тъй като ние говорим за визуална промяна на страницата (правене на текст поток около изображение), това означава, че е домейн на Cascading Style Sheets.

1. Първо, добавете вашето изображение към вашата уеб страница. Не забравяйте да изключите визуални характеристики (като стойности на ширина и височина) от този HTML код. Това е важно, особено за отзивчив уебсайт, където размерът на изображението ще варира в зависимост от браузъра. Някои софтуерни продукти, като Adobe Dreamweaver, ще добавят информация за ширината и височината към изображенията, които са вмъкнати с този инструмент, така че не забравяйте да премахнете тази информация от HTML кода! Уверете се, обаче, да включите подходящ алтернативен текст . Ето един пример за това как може да изглежда вашият HTML код:
2. За целите на оформянето можете да добавите и класа към изображение. Тази стойност на класа е това, което ще използваме в нашия CSS файл. Обърнете внимание, че стойността, която използваме тук, е произволна, въпреки че за този конкретен стил имаме склонност да използваме стойности "ляво" или "дясно", в зависимост от това как искаме изображението ни да се приведе в съответствие. Смятаме, че простият синтаксис работи добре и е лесен за другите, които може би ще трябва да управляват даден сайт в бъдеще, за да разберат, но бихте могли да дадете тази стойност на класа, която искате.
   2. Само по себе си тази класова стойност няма да направи нищо. Изображението няма автоматично да бъде изравнено вляво с текста. Затова сега трябва да се обърнем към нашия CSS файл.

1. В стиловата ви таблица вече можете да добавите следния стил:
   1. .наляво {
   2. плувка: ляво;
   3. подложка: 0 20px 20px 0;
   4. }
   5. Това, което направихте тук, е използването на свойството "float" на CSS , което ще издърпа изображението от нормалния поток на документа (начинът, по който изображението нормално ще се показва и текстът ще бъде подравнен под него) и ще го подравни с лявата страна на контейнера , Текстът, който идва след него в HTML маркировката, сега се увива около него. Също така добавихме някои стойности на подложка, така че този текст да не е директно срещу изображението. Вместо това, той ще има някои хубави разстояния, които ще бъдат визуално привлекателни в дизайна на страницата. В стенограмата на CSS за подложка добавихме 0 стойности в горната и в лявата част на изображението и 20 пиксела вляво и отдолу. Не забравяйте, че трябва да добавите подложка от дясната страна на ляво подравнено изображение. Правното подравнено изображение (което ще разгледаме в един миг) ще има подложка, приложена от лявата му страна.
2. Ако преглеждате уеб страницата си в браузър, сега трябва да видите, че изображението ви е подравнено с лявата страна на страницата и текстът е добре обвит около нея. Друг начин да кажа това е, че изображението е "плавано вляво".

1. Ако искате да промените това изображение, за да бъде подравнено вдясно (както е в примера за снимка, който придружава тази статия), би било просто. Първо, трябва да сте сигурни, че в допълнение към стила, който току-що добавихме към нашия CSS за класовата стойност на "лявата", имаме и една за подравняване вдясно. Ще изглежда така:
   1. .right {
   2. float: right;
   3. подложка: 0 0 20px 20px;
   4. }
   5. Можете да видите, че това е почти идентично с първото CSS, което написахме. Единствената разлика е стойността, която използваме за собствеността "float" и стойностите на подложките, които използваме (добавяне на някои в лявата страна на изображението вместо вдясно).
2. И накрая, ще промените стойността на класа на изображението от "ляво" на "надясно" във вашия HTML код:
3. Погледнете страницата си в браузъра сега и вашето изображение трябва да бъде подравнено вдясно с текста, който е добре обвит около него. Ние сме склонни да добавим и двата стила "ляво" и "дясно" към всички стилове, така че да можем да използваме тези визуални стилове, когато е необходимо, когато създаваме уеб страници. Тези два стила се превръщат в приятни, многократно използвани функции, с които можем да се обърнем, когато се налага да стилме изображения с обвиване около тях.

Използване на HTML Вместо CSS (и защо не трябва да правите това)

Макар че е възможно да се обвие текст около изображение с HTML, уеб стандартите налагат, че CSS (и стъпките, представени по-горе) е начинът да отидем, за да можем да запазим отделянето на структурата (HTML) и стила (CSS). Това е особено важно, когато смятате, че за някои устройства и оформления текстът може да не се нуждае от поток около изображението. За по-малки екрани, оформлението на отзивчив уебсайт може да изисква текстът наистина да се подреди под изображението и изображението да се простира по цялата ширина на екрана. Това лесно се прави с медийни заявки, ако стиловете ви са отделни от вашия HTML маркер. В днешния свят с множество устройства, където изображенията и текстът ще изглеждат по различен начин за различните посетители и на различни екрани, това отделяне е от съществено значение за дългосрочния успех и управлението на уеб страница.