Как в html сделать чтобы текст обтекал картинку в

Как в html сделать чтобы текст обтекал картинку в
Как в html сделать чтобы текст обтекал картинку в
Как в html сделать чтобы текст обтекал картинку в

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

Правильное и красивое размещение всех объектов на странице — неотъемлемый элемент дизайна любого уважающего себя сайта. Как всегда, здесь не обойтись без 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 сделать чтобы текст обтекал картинку в Как в html сделать чтобы текст обтекал картинку в Как в html сделать чтобы текст обтекал картинку в Как в html сделать чтобы текст обтекал картинку в Как в html сделать чтобы текст обтекал картинку в Как в html сделать чтобы текст обтекал картинку в Как в html сделать чтобы текст обтекал картинку в Как в html сделать чтобы текст обтекал картинку в Как в html сделать чтобы текст обтекал картинку в Как в html сделать чтобы текст обтекал картинку в Как в html сделать чтобы текст обтекал картинку в Как в html сделать чтобы текст обтекал картинку в

Тоже читают:



Итп в многоквартирном доме схема гвс

Оригинальные поделки из морских ракушек

Как надпись сделать ссылкой в html

Поздравления с днем рождения для полковников

Поздравления завучам на 1 сентября