Потрібен код для перенесення тексту навколо зображення? Зазвичай, коли ви створюєте 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 natoque penatibus et magnis dis породисти Монтес, nascetur ridiculus mus. Аліквам felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ви можете скористатися цією програмою.
Щоб мати обтікання тексту на правій стороні зображення, потрібно зрівняти зображення ліворуч:
Ваш текст надходить тут.
Якщо ви хочете, щоб текст з'являвся ліворуч, а зображення - справа, то змініть параметр вирівнювання на "право".
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Дуйс-аліпісуючий tincidunt sagittis. Cum sociis natoque penatibus et magnis dis породисти Монтес, nascetur ridiculus mus. Аліквам felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ви можете скористатися цією програмою.
Ваш текст надходить тут.
Це воно! Досить легко? Єдиний час, коли ви хочете використовувати CSS, це якщо ви хочете додати поля до зображень, так що між текстом і зображенням є деякий простір.
Ви можете додати поля до зображення, використовуючи такий код CSS:
Ваш текст надходить тут.
Вищезазначений код використовує елемент MARGIN CSS для додавання 10 пікселів пробілів на правій стороні зображення. Оскільки ми зрівняли зображення зліва, ми хочемо додати пробіл праворуч.
В основному, чотири числа представляють ПРАВИЛЬНУ ВЕРХНУ ВІДНОК. Отже, якщо ви хочете додати пробіл до зображення, яке вирівнюється праворуч, виконайте такі дії:
Ваш текст надходить тут.
Отже, це досить просто використовувати HTML для виконання цього завдання, але знову ж таки, він може не працювати добре для реагуючих сайтів.
Оберніть текст навколо зображення за допомогою CSS
Кращий спосіб обернути текст навколо зображення - це використання CSS. Це дає вам більш тонкий контроль зерна над позиціонуванням елементів і працює краще з сучасними стандартами кодування.
Незважаючи на те, що я включив CSS безпосередньо в тег зображення у прикладі HTML, ви насправді ніколи більше цього не повинні робити. Замість цього ви повинні мати окремий файл, який називається таблицею стилів, який містить весь ваш код CSS.
У тезі IMG ви можете просто призначити клас тегу і дати йому ім'я. У моєму прикладі я назвав клас лівим . У моїй таблиці стилів потрібно лише додати наступний код:
.left {float: left; заповнення: 0 10px 0 0;} Як ви можете бачити, я додав 10px відступу до правого боку зображення, вирівняного ліворуч. Я також використовував властивість float для переміщення зображення з нормального потоку документа і поклав його на ліву сторону батьківського контейнера.
Як ви бачите, це набагато чистіше, ніж додавання всього цього коду до самого тегу IMG. Також легше керувати, і ви можете використовувати набагато більше властивостей CSS, щоб налаштувати вигляд веб-сторінки. Якщо у Вас виникли питання, не соромтеся коментувати. Насолоджуйтесь!
