Нужен код, чтобы обернуть текст вокруг изображения? Обычно, когда вы создаете страницу HTML, все течет линейно, то есть один блок непосредственно за другим. Все мои предыдущие посты являются примером этого, то есть текст, затем изображение, затем текст и т. Д.
Иногда вы можете включить текст рядом с изображением, а не под ним. Это называется обтеканием текста вокруг изображения. На самом деле довольно легко обернуть текст с помощью HTML. Обратите внимание, что вам не нужно использовать CSS для переноса текста.
Однако в наши дни W3C рекомендует использовать CSS вместо HTML для таких задач. Я упомяну оба метода ниже, но если вы можете, лучше использовать CSS, так как он более адаптируется к адаптивным дизайнам сайтов.
Обтекание текста вокруг изображения с использованием HTML
Lorem Ipsum Dolor Sit Amet, Concetetur 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 augu lobortis dictum. Curabitur molestie посуер лаореет. Ut pellentesque nunc в споре Lorem egestas не imperdiet enim.
Чтобы текст обернулся вдоль правой стороны изображения, необходимо выровнять изображение по левому краю:
Ваш текст идет сюда.
Если вы хотите, чтобы текст отображался слева, а изображение - справа, просто измените параметр выравнивания на «вправо».
Lorem Ipsum Dolor Sit Amet, Concetetur 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 augu lobortis dictum. Curabitur molestie посуер лаореет. Ut pellentesque nunc в споре Lorem egestas не imperdiet enim.
Ваш текст идет сюда.
Это оно! Довольно легко, верно? Единственный раз, когда вы захотите использовать CSS, это если вы хотите добавить поля к изображениям, чтобы между текстом и изображением было свободное пространство.
Вы можете добавить поля к изображению, используя следующий код CSS-стиля:
Ваш текст идет сюда.
Приведенный выше код использует CSS-элемент MARGIN для добавления 10 пикселей пробела с правой стороны изображения. Поскольку мы выровняли изображение по левому краю, мы хотим добавить пробел справа.
По сути, четыре числа представляют верхнюю правую нижнюю левую. Поэтому, если вы хотите добавить пробел к выровненному по правому краю изображению, вы должны сделать это:
Ваш текст идет сюда.
Так что для выполнения этой задачи достаточно просто использовать HTML, но, опять же, он может не работать на адаптивных сайтах.
Обтекание текста вокруг изображения с использованием CSS
Лучший способ обернуть текст вокруг изображения - использовать CSS. Это дает вам более точный контроль над расположением элементов и работает лучше с современными стандартами кодирования.
Несмотря на то, что я включил CSS непосредственно в тег image в примере HTML, вам больше никогда не следует этого делать. Вместо этого у вас должен быть отдельный файл, называемый таблицей стилей, который содержит весь ваш код CSS.
В теге IMG вы просто назначаете класс тегу и присваиваете ему имя. В моем примере я назвал класс слева . В моей таблице стилей все, что мне нужно сделать, это добавить следующий код:
.left {float: left; отступ: 0 10px 0 0;} Как вы можете видеть, я добавил 10px отступа к правой стороне выровненного по левому краю изображения. Я также использовал свойство float, чтобы переместить изображение из обычного потока документа и поместить его в левую часть родительского контейнера.
Как видите, это намного чище, чем добавлять весь этот код в сам тэг IMG. Это также проще в управлении, и вы можете использовать намного больше свойств CSS, чтобы настроить внешний вид вашей веб-страницы. Если у вас есть какие-либо вопросы, не стесняйтесь комментировать. Наслаждайтесь!
