Нуждаете се от кода, за да обгръщате текст около изображение? Обикновено, когато създавате 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. Душът е маслинен tincidunt sagittis. Cum sociis nato le penitibus et magnis dis роднини монтес, nascetur ridiculus mus. (2). \ T Curabitur molestie posuere laoreet. Ellent es.
За да превъртите текста в дясната страна на изображението, трябва да подравните картината наляво:
Вашият текст е тук.
Ако искате текстът да се появи вляво и изображението да се появи в най-дясната част, просто променете параметъра за подравняване на „дясно“.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Душът е маслинен tincidunt sagittis. Cum sociis nato le penitibus et magnis dis роднини монтес, nascetur ridiculus mus. (2). \ T Curabitur molestie posuere laoreet. Ellent es.
Вашият текст е тук.
Това е! Много лесно ли е? Единственият път, когато искате да използвате CSS, е ако искате да добавите полета към снимките, така че да има известно разстояние между текста и изображението.
Можете да добавите полета към картина, като използвате следния CSS код:
Вашият текст е тук.
Горният код използва MARGIN CSS елемента, за да добави 10 пиксела от празно пространство от дясната страна на изображението. Тъй като сме подравнили изображението наляво, искаме да добавим празното пространство вдясно.
По принцип, четирите числа представляват най-горната дясна лява страна. Така че, ако искате да добавите бяло пространство към изображение с дясно подравняване, ще направите това:
Вашият текст е тук.
Така че е доста лесно да се използва HTML за изпълнение на тази задача, но отново може да не работи добре за отзивчиви сайтове.
Обгърнете текста около изображението с помощта на CSS
По-добрият начин за затваряне на текст около изображението е да се използва CSS. Това ви дава по-фин контрол върху позиционирането на елементите и работи по-добре с модерните стандарти за кодиране.
Въпреки че включих CSS директно в маркера за изображения в примера на HTML, наистина никога повече не бива да го правите. Вместо това трябва да имате отделен файл, наречен stylesheet, който съдържа целия ви CSS код.
В IMG таг, вие просто присвоите клас на маркера и му дадете име. В моя пример аз нарекох класа вляво . В моята таблица със стилове трябва само да добавя следния код:
.left {float: left; подложка: 0 10px 0 0;} Както можете да видите, добавих 10px от подложка към дясната страна на изображението, подравнено с ляво. Също така използвах свойството float да премествам изображението от нормалния поток на документа и да го поставя в лявата страна на родителския контейнер.
Както виждате, това е много по-чисто от добавянето на целия код към самия IMG маркер. Също така е по-лесно да се управлява и можете да използвате много повече CSS свойства, за да персонализирате вида на вашата уеб страница. Ако имате някакви въпроси, не се колебайте да коментирате. Наслади се!
