Как сделать обтекание картинки текстом в HTML и CSS

Как сделать обтекание картинки текстом в HTML и CSS

Быстрая навигация по этой странице:

Правильное и красивое размещение всех объектов на странице — неотъемлемый элемент дизайна любого уважающего себя сайта. Как всегда, здесь не обойтись без CSS. Дело в том, что обтекание картинки текстом HTML сам по себе делает (с помощью атрибутов align=left, align=right тега img), но он при этом не создает отступов. Потому без CSS все-таки не обойтись.

обтекание картинки текстом html

Общее решение задачи

CSS? Я знаю несколько способов, с помощью которых можно решить поставленную задачу.

Так, например, можно картинку заключить в тег DIV, которому через CSS задать свойство float:left или float:right, с проставлением необходимых отступов.

Но этот способ я бы не назвал самым корректным — зачем включать в документ лишний тег, если вопрос можно решить исключительно в рамках тега IMG?

Делается это с помощью присвоения все тех же самых свойств — float, отвечающего за выравнивание, и margin, отвечающего за отступы.

Для начала присвоим нашему изображению класс:

<img src="моя_картинка.jpg" width="100" height="100" class="img_class" />

Теперь пропишем соответствующие свойства в CSS — предположим, что у нас картинка будет стоять слева:

.img_class { float: left; margin: 10px 10px 10px 0; }

Свойство margin требуется для того, чтобы задать отступы текста от картинки — иначе он вплотную к ней прижмется, что будет не очень красиво. При этом мы задаем их сверху, справа и снизу, а левый отступ ставим равным нулю — так как само изображение будет находиться слева.

Массовое применение для всех изображений

Если требуется, чтобы все изображения в документе выравнивались по левому краю, тогда этот вопрос можно решить сразу на уровне того блока (элемента) страницы, в котором они находятся — чтобы не прописывать каждый раз class для изображения. Даже небольшая экономия трафика того стоит.

Предположим, что картинки находятся в посте, который на странице вашего сайта показывается в <div class=»content»></div>.

В таком случае в CSS файле вашего сайта будет достаточно прописать следующий код:

.content img { float: left; margin: 10px 10px 10px 0; }

Теперь все изображения, находящиеся в блоке «content», будут выравниваться слева и иметь вышеуказанные отступы. Если для какого-то отдельного изображения вы захотите сделать исключение — например, расположить его справа, то для него будет нужно задать id (например, id=»my_img») и в css файле прописать такие параметры (должны начинаться со знака решетки — #):

#my_img { float: right; margin: 10px 0 10px 10px; }

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

Порой необходимо, чтобы текст был написан прямо на изображении — например, часто бывает красиво, если сделать большую картинку к статье, а на ней написать название статьи или какую-то аннотацию.

Опять-таки, сделать это можно множеством способов. Приведу два наиболее популярных.

Во-первых, можно создать блок, в котором будет написан текст, а изображение будет выступать фоном для этого блока:

<div class="my_block">Текст, который будет наложен на картинку</div> .my_block { background: url (my_img.jpg) top left no-repeat; width: 500px; height: 300px; padding: 400px 0 0 0; }

В этом блоке строка с текстом разместится в нижней части блока — с верхним отступом в 400 пикселей.

Данный метод особенно хорошо подходит для элементов дизайна (шапка, логотип сайта), в которых уже заранее известен и размер изображения, и текст, который будет написан.

Другой метод — это создать два блока (один — с картинкой, другой — с текстом), и поместить один «сверху» другого в соответствии с заданными параметрами. Большой плюс этого метода состоит в том, что у блока с текстом можно задать фон (в том числе и полупрозрачность):

<div class="img"> <img src="моя_картинка.jpg" width="500" height="300" /> <div class="text">Текст, который будет наложен на картинку</div> </div> .img { width:500px; height: 300px; position: relative; } .text { background-color: #FFF; width: 500px; height: 50px; position: absolute; left: 0px; top: 450px; }

В приведенном примере мы разместили один блок внутри другого с помощью свойства position — блок с текстом будет иметь белый фон и располагаться в нижней части изображения.

Как видите, ничего сложного в обтекании картинок и наложении на них текста нет, главное — экспериментировать и подбирать наиболее удачный вариант!

Если Вы нашли для себя что-то полезное на этой странице, пожалуйста, нажмите на одну из этих кнопок:

Как сделать обтекание картинки текстом в HTML и CSS 56
Как сделать так чтобы текст "обтекал " картинку в презентации
Как сделать обтекание картинки текстом в HTML и CSS 98
Как сделать обтекание текстом рисунка в Word Мой друг Компьютер
Как сделать обтекание картинки текстом в HTML и CSS 41
Обтекание картинки текстом с помощью html и css - BEST SEO BLOG
Как сделать обтекание картинки текстом в HTML и CSS 55
Обтекание картинки текстом с помощью свойства float
Как сделать обтекание картинки текстом в HTML и CSS 96
Как сделать обтекание картинки текстом в Ворде
Как сделать обтекание картинки текстом в HTML и CSS 71
Как создавать обтекание картинки текстом html?
Как сделать обтекание картинки текстом в HTML и CSS 68
Как сделать обтекание картинки текстом в HTML?
Как сделать обтекание картинки текстом в HTML и CSS 19
Как сделать обтекание картинки текстом в html
Как сделать обтекание картинки текстом в HTML и CSS 2
Как сделать обтекание картинки текстом?
Как сделать обтекание картинки текстом в HTML и CSS 54
Как сделать обтекание текста в PowerPoint?
Как сделать обтекание картинки текстом в HTML и CSS 58
Как сделать обтекание картинки текстом в HTML и CSS 14
Как сделать обтекание картинки текстом в HTML и CSS 98
Как сделать обтекание картинки текстом в HTML и CSS 58
Как сделать обтекание картинки текстом в HTML и CSS 62
Как сделать обтекание картинки текстом в HTML и CSS 53
Как сделать обтекание картинки текстом в HTML и CSS 56
Как сделать обтекание картинки текстом в HTML и CSS 14

Похожие записи:

  • Чем почисть белую норку в домашних условиях от желтизны
  • Как в домашних условиях сделать крупные кудри на
  • Поздравление с днем мужчин на турецком языке
  • Оригинальные поделки из овощей на выставку
  • Как сделать полки для банок