Нужен код для обтекания изображения текстом? Обычно при создании HTML-страницы все происходит линейно, то есть один блок следует сразу за другим. Все мои предыдущие посты являются примером этого, т. е. текст, затем картинка, затем текст и т. д.
Иногда вам может потребоваться разместить текст рядом с изображением, а не под ним. Это называется обтеканием текста вокруг изображения. На самом деле довольно легко переносить текст с помощью HTML. Обратите внимание: для переноса текста не обязательно использовать CSS.
Однако в настоящее время W3C рекомендует для подобных задач использовать CSS вместо HTML. Ниже я упомяну оба метода, но если есть возможность, лучше использовать CSS, поскольку его легче адаптировать к адаптивному дизайну веб-сайтов.
Обтекание изображения текстом с помощью HTML
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gradida enim, quis ultricies mauris posuere quis. Duis adipiscingtincidunt sagittis. Cum sociis natoque penatibus et Magnis dis родильных гор, nascetur Ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Курабитур приставал к людям. Ut pellentesque nunc in lorem egestas non imperdiet enim congue.
Чтобы текст обтекал правую часть изображения, необходимо выровнять изображение по левому краю:
<img itemprop="image" data-original="IMAGE URL" align="left" /><p>Your text goes here.</p>
Если вы хотите, чтобы текст отображался слева, а изображение — справа, просто измените параметр выравнивания на «right».
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gradida enim, quis ultricies mauris posuere quis. Duis adipiscingtincidunt sagittis. Cum sociis natoque penatibus et Magnis dis родильных гор, nascetur Ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Курабитур приставал к людям. Ut pellentesque nunc in lorem egestas non imperdiet enim congue.
<img itemprop="image" data-original="IMAGE URL" align="right" /><p>Your text goes here.</p>
Вот и все! Довольно легко, правда? CSS можно использовать только в том случае, если вы хотите добавить к изображениям поля, чтобы между текстом и изображением оставалось некоторое пространство.
Вы можете добавить поля к изображению, используя следующий код стилей CSS:
<img itemprop="image" data-original=”IMAGE URL” align=”left” style=”margin: 0px 10px 0px 0px;” /><p>Your text goes here.</p>
Приведенный выше код использует элемент CSS MARGIN для добавления 10 пикселей пробелов в правой части изображения. Поскольку мы выровняли изображение по левому краю, мы хотим добавить пробелы справа.
По сути, четыре цифры обозначают ВЕРХНИЙ ПРАВЫЙ НИЖНИЙ СЛЕВА. Итак, если вы хотите добавить пустое пространство к изображению, выровненному по правому краю, сделайте следующее:.
<img itemprop="image" data-original=”IMAGE URL” align=”right” style=”margin: 0px 0px 0px 10px;” /><p>Your text goes here.</p>
Использовать HTML для выполнения этой задачи довольно просто, но опять же, он может не подойти для адаптивных сайтов.
Обтекание изображения текстом с помощью CSS
Лучший способ обернуть текст вокруг изображения — использовать CSS. Это дает вам более точный контроль над расположением элементов и лучше работает с современными стандартами кодирования.
<img itemprop="image" data-original="IMAGE URL" alt="A photo" class="lazy left" />
Хотя я включил CSS непосредственно в тег изображения в примере HTML, вам больше не следует этого делать. Вместо этого у вас должен быть отдельный файл, называемый таблицей стилей, в котором будет храниться весь ваш CSS-код.
В теге IMG вы просто назначаете тегу класс и даете ему имя. В моем примере я назвал класс left . В моей таблице стилей все, что мне нужно сделать, это добавить следующий код:
.left {
float: left;
padding: 0 10px 0 0;}
Как видите, я добавил отступ размером 10 пикселей к правой стороне изображения, выровненного по левому краю. Я также использовал свойство float, чтобы переместить изображение из обычного потока документа и поместить его в левую часть родительского контейнера.
Как видите, это намного проще, чем добавлять весь этот код в сам тег IMG. Им также проще управлять, и вы можете использовать гораздо больше свойств CSS для настройки внешнего вида вашей веб-страницы. Если у вас есть какие-либо вопросы, не стесняйтесь комментировать. Наслаждайтесь!.