Содержание

Делаем обтекание картинки текстом на HTML и CSS ⋆

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

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


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

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

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

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

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

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


<img src="моя_картинка.jpg" />

Теперь пропишем соответствующие свойства в 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>Текст, который будет наложен на картинку</div>

 


. my_block {
background: url (my_img.jpg) top left no-repeat; 
width: 500px;
height: 300px;
padding: 400px 0 0 0; 
}

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

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

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


<div>
<img src="моя_картинка.jpg" />
<div>Текст, который будет наложен на картинку</div>
</div>


.img { 
width:500px; 
height: 300px;
position: relative;
}
.text {
background-color: #FFF; 
width: 500px; 
height: 50px; 
position: absolute; 
left: 0px; 
top: 450px;
}

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

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

Простая техника позиционирования изображения при обтекании текстом

Довольно часто при верстке создается необходимость расположить изображение слева от текста таким образом, чтобы текст находился справа от изображения и не сворачивал под него, т.е. должно это выглядеть вот так:

Алеаединица, в первом приближении, текстологически интегрирует микрохроматический интервал, при этом нельзя говорить, что это явления собственно фоники, звукописи.

Акцент интегрирует сонорный композиционный анализ, однако сами песни забываются очень быстро.

Такое позиционирование текста достигается, благодаря помещению его в дополнительный <div>, которому указывается свойство display: table. Если бы был всего один параграф с текстом, то дополнительный

<div> не понадобился бы, достаточно было бы применить display: table к блоку параграфа. Однако, если на практике используется несколько параграфов, то их приходится помещать в отдельный контейнер, иначе второй и последующие параграфы съедут под изображение.

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

Описанное ниже решение применимо в двух следующих случаях:

  1. Если используется более одного абзаца с текстом.
  2. Если изображение имеет постоянную ширину.

Пусть, к примеру, у нас будет следующий html-код:


<ul>
	<li>
		<img src="image. jpg" alt="" />
		<p>Параграф с текстом</p>
		<p>Еще один параграф с текстом</p>
	</li>
</ul>

Приступим к стилям.

Шаг 1-й

Для начала создадим слева от текста отступ, в который уместится изображение, и добавим к последнему обтекание текстом:


ul li {padding-left: 147px}
ul li img {float: left}

Получаем вот такую картину:

Шаг 2-й

Следующим стилем мы позиционируем изображение:


ul li img {
	float: left;
	position: relative;
	left: -135px;
}

Пример обретает следующий вид:

Шаг 3-й

Теперь остается ликвидировать разрыв между изображением и текстом путем добавления отрицательного отступа справа от изображения:


ul li img {
	float: left;
	position: relative;
	left: -135px;
	margin-right: -135px;
}

И вот результат:

Как альтернатива, изображение можно позиционировать абсолютно.

Источник описанной техники

Html текст справа от изображения

Выравнивание изображения по левому краю страницы, в то время как текст обтекает его, является довольно распространенным решением.

В веб этот эффект известен как « смещение » изображения. Подобный стиль реализуется с помощью CSS-свойства float left , которое задает обтекание текстом выровненного по левому краю изображения.

Начинаем с HTML

Для нашего примера мы создадим абзац текста и добавим в начале изображение ( перед текстом, но после открывающегося тега

). Вот как выглядит HTML-разметка :

По умолчанию веб-страница будет отображаться с изображением над текстом. Это связано с тем, что в HTML изображения являются блочными элементами. Это значит, что браузер отображает разрывы строки до и после изображения. Мы изменим это поведение по умолчанию с помощью CSS . Но сначала добавим к нашему элементу изображения значение класса:

Стили CSS

Включив в HTML-код атрибут класса « left », можно перейти к vertical align central float left . Мы добавим в таблицу стилей правило, которое задаст смещение изображения. А также несколько дополнительных правил, которые обеспечат, чтобы текст не прилегал к изображению вплотную, обтекая его.

Этот код смещает изображение влево и добавляет небольшие отступы справа и снизу от изображения.

Если просмотреть в браузере страницу, то изображение в ней будет выровнено по левому краю, а текст абзаца будет отображаться справа от него с соответствующим отступом. Одно замечание относительно значения класса « left «, которое мы использовали. Имейте в виду, что это значение является произвольным. Мы могли бы назвать класс как угодно, а термин « left » сам по себе ничего не делает.

Нам просто нужно задать атрибут класса в HTML , который связан с фактическим стилем CSS float left , а он уже определяет визуальные изменения, которые необходимо произвести.

Альтернативные способы

Подход, при котором мы задаем для изображения атрибут класса, а затем используем общий стиль CSS , который смещает элемент, это только один способ « выравнивания по левому краю ». Также можно убрать значение класса и создать эффект, написав более конкретный селектор. Рассмотрим пример, в котором изображение находится внутри раздела со значением класса « main-content «:

Задать стили для изображения можно с помощью следующего кода CSS :

Изображение будет выровнено по левому краю, текст будет обтекать его, как и раньше, но нам не нужно добавлять дополнительное значение класса в разметку. Этот способ выравнивания float left по центру позволит создать меньший HTML-файл , что повысит производительность.

Также можно добавить стили непосредственно в HTML-разметку , например:

Этот метод style float left не является рекомендованным, так как при его использовании стили смешиваются с разметкой, то есть со структурой.

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

Данная публикация представляет собой перевод статьи « How To Float an Image to the Left of Text on a Webpage » , подготовленной дружной командой проекта Интернет-технологии.ру

Бывает так, что нужно вывести картинку и приписать название (короткую фразу). Для этого есть такие параметры:

• align=»top» – выравнивает текст по верху изображения.
• align=»bottom» – выравнивает текст по низу.
• align=»middle» – выравнивает текст по центру.

Ниже приведён код, в котором демонстрируется работа выше описанных параметров.

Красивая пчёлка

Очень симпатичная пчёлка

Тоже ничего.

Теперь посмотрим, как нужно выводить картинку при большом количестве текста.
Есть два параметра:

• align=»left» – изображение «обтекает текст» слева.
• align=»right» – изображение «обтекает текст» справа.

Для наглядности напишите такой код:

Солнце

По форме Солнце близко к идеальной сфере с диаметром 1392000 км. Оно вмещает в себя орбиту Луны, и еще остается много места. Фактически более миллиона таких планет как Земля свободно поместились бы внутри Солнца. Кроме того, если бы вы смогли вести машину по его поверхности со скоростью 88 км/ч, у вас бы ушло 5 с половиной лет, чтобы объехать Солнце один раз (притом не останавливаясь). Но размер Солнца не постоянен. Современные исследования показывают, что диаметр Солнца уменьшается приблизительно на 1 метр в час. Если этот феномен проходил и в прошлом столетии, тогда Солнце, которое мы видим сейчас на 800 км меньше, чем то, которое видели наши предки. Возможно, это солнечное сжатие является частью долговременного колебания, которое помогает стабилизировать громадный выброс энергии.

Луна

Это единственный естественный спутник Земли. Масса Луны составляет 0,0123 массы Земли (приблизительно 1/81) или 7,6.1022 кг. Диаметр Луны чуть больше четверти земного (0,273) или 3 476 км. Луна освещает Землю в 500 000 раз слабее Солнца). На Луне нет привычной для нас атмосферы, нет рек и озёр, растительности и живых организмов. Сила тяжести на Луне в шесть раз меньше, чем на Земле. День и ночь с перепадами температур до 300 градусов длятся по две недели.

Но как вы видите может быть так, что текст и картинка слишком близко находятся друг к другу. Что бы исправить это, нужно просто задать некоторую нужную величину толщины рамки и цвет, как у заднего фона.

Астрономическое явление, которое заключается в том, что Луна закрывает (затмевает) полностью или частично Солнце от наблюдателя на Земле. Солнечное затмение возможно только в новолуние, когда сторона Луны, обращенная к Земле, не освещена, и сама Луна не видна. Затмения возможны только если новолуние происходит вблизи одного из двух лунных узлов (точки пересечения видимых орбит Луны и Солнца), не далее чем примерно в 12 градусах от одного из них.

Иллюстрации всегда использовались для наглядного донесения до читателя нужной информации, для оформления страниц сайта и включения в текст различных графиков, диаграмм и схем. В общем, область применения изображений на сайтах достаточно велика. При этом используется несколько способов добавления рисунков в текст веб-страницы, которые и рассмотрены далее.

Рисунок по центру

Для выравнивания изображения по центру колонки текста, тег помещается в контейнер

, для которого устанавливается атрибут align=»center» . Но если предполагается активное использование иллюстраций, то лучше создать новый стилевой класс, назовем его fig , и применим его для нужных абзацев, как показано в примере 1.

Пример 1. Выравнивание рисунка по центру

В данном примере класс fig добавляется к селектору P , а способ выравнивания определяется свойством text-align . Положение рисунка относительно текста схематично показано на рис. 1.

Рис. 1. Рисунок в центре колонки текста

Обтекание рисунка текстом

Обтекание картинки текстом — один из популярных приемов верстки веб-страниц, когда изображение располагается по краю окна браузера, а текст обходит его с других сторон (рис. 2). Для создания обтекания изображения текстом существует несколько способов, связанных, как с возможностью тегов HTML, так и с применением стилей.

Рис. 2. Рисунок выровнен по левому краю и обтекается текстом справа

Так, у тега есть атрибут align , который определяет выравнивание изображения. Этот атрибут задает, возле какого края окна будет располагаться рисунок, одновременно устанавливая и способ обтекания текста. Чтобы выровнять изображение по правому краю и задать обтекание слева, используют значение right , для выравнивания по левому краю применяют left . Атрибут align часто используют в связке с другими атрибутами тега — vspace и hspace . Они определяют расстояние от обтекаемого текста до изображения. Без этих атрибутов изображение и текст будут слишком плотно прилегать друг к другу (пример 2).

Пример 2. Использование свойств тега

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

Для обтекания картинки текстом также можно применить стилевое свойство float . Значение right будет выравнивать изображение по правому краю окна браузера, а текст заставляет обтекать рисунок слева (пример 3). Значение left , наоборот, выравнивает изображение по левому краю, а текст — справа от рисунка.

Пример 3. Использование стилей

В данном примере к тегу добавляется класс fig , для которого установлено выравнивание по правому краю и, соответственно, обтекание картинки слева. Чтобы текст не прилегал плотно к изображению, применяются свойства padding-left и padding-bottom .

Рисунок на поле

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

Рис. 3. Изображение размещается на поле слева от текста

Существует несколько методов достижения подобного результата. Рассмотрим два из них — использование таблицы и применение стилевого свойства margin .

Применение таблиц

Таблицы удобны тем, что позволяют легко создать структуру колонок с помощью ячеек. Потребуется таблица с тремя ячейками, в одной будет располагаться изображение, во второй текст, а третья нужна, чтобы создать отступ между ними. Можно также обойтись и двумя ячейками, а нужное расстояние задать через стили или с помощью атрибута width тега

Пример 4. Создание рисунка на поле с помощью таблиц

Результат примера показан на рис. 4.

Рис. 4. Изображение слева от текста

В данном примере ширина рисунка составляет 90 пикселов, а ширина колонки, где он располагается — 110 пикселов. Разница между ними и обеспечивает нужное расстояние от текста до картинки. Чтобы атрибуты таблицы cellspacing и cellpadding не вмешивались в процесс, их значения лучше обнулить. Обратите внимание, что в ячейках задается выравнивание по высоте.

Использование стилей

В данном случае потребуется два слоя, параметры которых будем изменять через CSS. Изображение поместим в слой с именем pic , а текст, сильно не мудрствуя, в слой text . Теперь для слоя piс следует установить свойство float со значением left , а для text — margin-left . Значение этого параметра равно ширине рисунка плюс необходимый отступ до текста (пример 5).

Пример 5. Использование margin

Свойство float в данном примере нужно, чтобы верхний край текста совпадал с верхним краем рисунка. Без этого свойства слой text опускается вниз на высоту изображения.

Если рисунок следует расположить справа от текста, то значение float меняем на right , а свойство margin-left на margin-right .

. В примере 4 показано создание указанной таблицы.

Учебник по HTML — Размещение текста рядом с картинкой


Онлайн-будильник

Сегодня большинство компьютеров подключено к интернет постоянно, и поэтому нет ничего удивительного в том, что все время появляются все новые и новые сервисы, предлагающие выполнять онлайне, то, что люди привыкли делать без помощи сети. Еще одно пополнение в копилке онлайн-сервисов — часы-будильник. Если у вас под рукой нет будильника, а утром рано вставать, просто зайдите на сайт Onlineclock, установите время побудки, и онлайн-будильник не даст вам проспать. Создатели ресурса также предусмотрели возможность выбора цвета фона и размера цифр. Она должна понравиться тем, кто часто просыпается среди ночи и смотрит, сколько часов сна ему еще осталось.


Как рисовать в Photoshop

Photoshop изначально был предназначен для обработки готовых изображений, это уже потом, с приходом специальных устройств ввода, таких как графические планшеты, стало возможным с нуля создавать творческие работы, чем художники сейчас активно пользуются. В этом ролике вы увидите как же создают свои цифровые картины настоящие мастера Photoshopa. Посмотрите, как быстро и легко нарисовал певицу Beyonce американский художник.


Размещение текста рядом с картинкой
на предыдущую страницу  | Оглавление  | на следующую страницу Текст может располагаться сверху, внизу, снизу и рядом с картинкой.

<img src=»image.jpg» align=»top»> — размещение текста вверху
<img src=»image. jpg» align=»middle»> — размещение текста посередине
<img src=»image.jpg» align=»bottom»> — размещение текста снизу
<img src=»image.jpg» align=»left»> — размещение текста справа
<img src=»image.jpg» align=»right»> — размещение текста слева

По умолчанию ширина и высота картинки равна реальным размерам картинки, чтобы саму картинку не менять в размерах, можно это сделать с помощью тэгов (он её сожмет, но будет выглядеть немного криво):

<img src=»image.jpg»>

Где — цифра регулирует ширину картинки
— цифра регулирует высоту картинки

<img src=»image.jpg» alt=»моя первая картинка на сайте»> — если навести курсор мыши на рисунок, то через некоторое время выскочит описание картинки, в этом случае выскочит «моя первая картинка на сайте».

Для приведения примера понадобится маленькая картинка, примерно 100х100 пикселей.

<HTML>
<head>
<title>Мой первый сайт!</title>
</head>
<body>
<center><h4>Добро пожаловать мой первый сайт!</h4></center>
<font size=»2″><img src=»image.jpg» align=»right» alt=»моя первая картинка на сайте»> Учиться искусству создания сайта необходимо, ведь Интернет предлагает нам уникальную возможность заявить о себе, проявить свой творческий талант и быть услышанным. Вступив на эту дорогу, вам придетсяотдавать вашему будущему сайту все силы, всю энергию, весь талант. <br>
Учтите еще и вот что: процесс создания сайта включает в себя как технические, так и чисто творческие моменты </font>
</body>
</html>

В примере показано, как разместить текст по левому краю, а также описание картинки, высота и ширина.

на предыдущую страницу  | Оглавление  | на следующую страницу

    Важно!
  • всё, что между означает тэг. Если между ними подставить текст, то его не будет видно в браузере.
  • при изменении определенного текста (а это тэги для изменения шрифта, цвета или выравнивание текста и т.п.) обязательно должен быть заканчивающий тэг.
  • тэги можно писать как заглавными, так и прописными буквами
  • нельзя называть созданную HTML страничку (например: мой сайт.html) по-русски, только по-английски и без пробелов.

Как связаться с нами

Знакомство с Windows
Познакомьтесь с некоторыми возможностями компьютера, с помощью которого можно сделать свой Windows более удобным и привлекательным, компьютер — надежнее и быстрее, а работу в сети безопасной.

html — Делайте обтекание текстом только при наличии изображения

Я пытаюсь выровнять текст справа или слева от изображения. Это легко достигается с помощью float или flex. Тем не менее, я пытаюсь сделать это с вертикальным выравниванием.

То, что я вижу, я могу создать впечатление, что текст перемещается влево или вправо, используя вертикальное выравнивание.

У меня проблема, когда объем текста превышает ширину контейнера, текст разрывается (как и ожидалось) на новую строку. Но вместо того, чтобы быть новой строкой прямо под оригиналом и по-прежнему справа / слева от рисунка, разрыв вставляет текст под изображением.

Какой-то очень тривиальный код демонстрирует это

<img src="https://www.google.co.uk/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png"/> Please  enter lots of words

https://jsfiddle.net/metkc72p/

Я не хочу использовать float или flex, поскольку цель этого состоит в том, чтобы понять ограничения.

Мой вопрос только в том, могу ли я что-нибудь сделать с этим неуклюжим расщеплением.

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

1

MyDaftQuestions 5 Янв 2018 в 15:08

3 ответа

Лучший ответ

Ваше изображение и ваш текст являются встроенными элементами.

С точки зрения браузера, изображение и текст находятся на одной строке.

С вашей точки зрения, представьте, что изображение — это просто другое слово в строке, но с font-size: 3em.

Из-за более высокой высоты изображения текст вынужден переноситься намного ниже, что приводит к высокому разрыву внутри абзаца.

Но если текст и изображение имеют одинаковый размер, то обтекание выглядит более естественным.

img {
  height: 15px;
}
<img src="https://www.google.co.uk/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png"> Here is some content... I'm hoping there is enough content so that it runs over multiple 'lines' (rows) so you can see where the text breaks, it ends up underneath
the image. I'd expect there to be 3 or 4 rows of text until it breaks like this, and not break at the first

пересмотренный демо

Если вы не хотите, чтобы текст переносился под изображение, используйте другой метод, например flexbox:

body {
  display: flex;
}
<img src="https://www.google.co.uk/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png"> Here is some content... I'm hoping there is enough content so that it runs over multiple 'lines' (rows) so you can see where the text breaks, it ends up underneath
the image. I'd expect there to be 3 or 4 rows of text until it breaks like this, and not break at the first

1

Michael Benjamin 10 Янв 2018 в 17:44

div {
  float: left;
  width: 50%;
}
<div>
<img src="https://www. google.co.uk/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png"/>
</div>
<div>
Here is some content... I'm hoping there is enough content so that it runs over multiple 'lines' (rows) so you can see where the text breaks, it ends up underneath the image. I'd expect there to be 3 or 4 rows of text until it breaks like this, and not break at the first 
</div>

Используйте div и передайте width и float в div. Проверьте эту скрипку

https://jsfiddle.net/metkc72p/6/

0

Shafeeque 5 Янв 2018 в 12:50

Вы должны использовать свойство float: left. Вы можете увидеть это здесь: https://jsfiddle.net/metkc72p/5/

-1

pyhazard 5 Янв 2018 в 12:41

Обтекание изображения текстом

Использование картинок в html-страничке всегда более информативно и наглядно, по-сравнению со сплошным текстом.

Вставить картинку в html-текст возможно несколькими способами и в классике этих способов 3:

  • выравнивание изображения по центру
  • обтекание изображения текстом
  • размещение изображения в поле

 

Выравнивание изображения по центру

Для выравнивания изображения по центру колонки текста, проще всего тег <img> поместить в контейнер <p>, для которого ставится атрибут align=»center». Если ожидается частое использование картинок, то оптимальнее будет применение CSS стиля для тега <p>. Как это реализовано, смотрите в примере 1.

Пример 1. Выравнивание рисунка по центру

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Рисунок по центру</title>
    <style type="text/css">
      P. cimg{
        text-align: center; /* Выравнивание по центру */
      }
    </style>
  </head>
  <body>
    <p>
      <img src="images/sample.gif" alt="Иллюстрация">
    </p>
  </body>
</html>

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»> <html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>  <title>Рисунок по центру</title>   <style type=»text/css»>   P.cimg{   text-align: center; /* Выравнивание по центру */   }   </style>   </head>   <body>   <p>   <img src=»images/sample.gif» alt=»Иллюстрация»>   </p>   </body> </html>

В данном примере к контейнеру <p> добавляем CSS-класс cimg, в котором прописывается выравнивание по центру строки. То, как это будет схематично выглядеть — показано на рисунке 1.

Рис. 1. Рисунок в центре колонки текста

Обтекание изображения текстом

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

Рис. 2. Рисунок выровнен по левому краю страницы и обтекается текстом справа

Для того, чтобы осуществить обтекание изображения текстом с помощью HTML нужно помнить, что у тега <img> есть атрибут align, который определяет выравнивание изображения в документе и при этом указывает способ обтекания изображения текстом. Для того, чтобы сделать выравнивание изображения по правому краю и задать обтекание слева, нужно использовать align=»right», для выравнивания по левому краю и обтекания текстом справа используем align=»left». Здесь также полезно использовать атрибуты тега <img> — vspace и hspace, которые указывают на каком расстоянии текст будет обтекать изображение по вертикали и горизонтали. Без указания этих атрибутов текст будет вплотную прилегать к изображению (пример 2).

Пример 2. Обтекание изображения текстом с использованием HTML

1
2
3
4
5
6
7
8
9
10
11
12
13

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Рисунок в тексте</title>
 </head>
 <body>
  <p>
   <img src="images/sample.gif" alt="Иллюстрация" align="left" vspace="5" hspace="5">
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
  </p>
 </body>
</html>

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»> <html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″> <title>Рисунок в тексте</title> </head> <body> <p> <img src=»images/sample.gif» alt=»Иллюстрация» align=»left» vspace=»5″ hspace=»5″> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p> </body> </html>

Для того чтобы настроить обтекание изображения с помощью CSS стилей будем использовать правило float. float:right — выравнивает изображение по правому краю документа и делает обтекание текстом слева, а float:left делает выравнивает изображение по левому краю документа и обтекание текстом справа от изображения (пример 3).

Пример 3. Обтекание изображения текстом с использованием CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Рисунок в тексте</title>
  <style type="text/css">
   IMG.cimg{
    float: right; /* Обтекание картинки по левому краю */
    padding-left: 10px; /* Отступ слева */
    padding-bottom: 10px; /* Отступ снизу */
   }
  </style>
 </head>
 <body>
  <p>
   <img src="images/sample.gif" alt="Иллюстрация">
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
  </p>
 </body>
</html>

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»> <html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″> <title>Рисунок в тексте</title> <style type=»text/css»> IMG.cimg{ float: right; /* Обтекание картинки по левому краю */ padding-left: 10px; /* Отступ слева */ padding-bottom: 10px; /* Отступ снизу */ } </style> </head> <body> <p> <img src=»images/sample.gif» alt=»Иллюстрация»> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p> </body> </html>

Здесь к тегу <img> добавляется класс cimg, у которого установлено выравнивание по правому краю float:right, а обтекание картинки слева и снизу задано свойствами padding-left:10px и padding-bottom:10px.

Изображение на поле

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

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


Рис. 3. Размещение изображения в поле слева от текста

Я знаю два способа создать подобную структуру — с помощью HTML-тегов <table> и с помощью CSS-правила margin. Рассмотрим эти два способа:

Таблицы: данный способ удобен тем, что легко и понятно позволяют организовать колоночную структуру с помощью ячеек. Данный способ является олдскульным и его применение не особо приветствуется в современном веб-дизайне. Считается что данный способ избыточен и сложен в правке. Но все новички через него проходят. Для такой структуры нам потребуется таблица с тремя колонками, в первой колонке будет само изображение, в третьей текст, а между ними мы укажем отступ — во второй колонке. Можно обойтись и двумя колонками, а отступ указать через CSS-стили или с помощью атрибута width тега (пример 4).

Пример 4. Размещение изображения на поле с помощью таблиц

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Рисунок на поле</title>
  <style type="text/css">
   TD.leftcol{
    width: 110px; /* Ширина левой колонки с рисунком */
    vertical-align: top; /* Выравнивание по верхнему краю */
   }
  </style>
 </head>
 <body>
  <table cellspacing="0" cellpadding="0">
   <tr>
    <td>
     <img src="images/igels. png" alt="Вы не поверите, но это ёжик">
    </td>
    <td valign="top">
     Ёжики защищены от внешней агрессии колючим панцирем, который спасает их от тех, кто хочет поживиться вкусным и нежным мясом ежа. Но не стоит считать это животное и совершенно безобидным, все-таки это хищник. Да, он не питается волками и лисами, но только потому, что уступает им в размерах. А вот закусить червячком или даже змеей ему вполне под силу.
    </td>
   </tr>
  </table>
 </body>
</html>

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»> <html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″> <title>Рисунок на поле</title> <style type=»text/css»> TD.leftcol{ width: 110px; /* Ширина левой колонки с рисунком */ vertical-align: top; /* Выравнивание по верхнему краю */ } </style> </head> <body> <table cellspacing=»0″ cellpadding=»0″> <tr> <td> <img src=»images/igels. png» alt=»Вы не поверите, но это ёжик»> </td> <td valign=»top»> Ёжики защищены от внешней агрессии колючим панцирем, который спасает их от тех, кто хочет поживиться вкусным и нежным мясом ежа. Но не стоит считать это животное и совершенно безобидным, все-таки это хищник. Да, он не питается волками и лисами, но только потому, что уступает им в размерах. А вот закусить червячком или даже змеей ему вполне под силу. </td> </tr> </table> </body> </html>

то, что получится в результате показано на рисунке 4.


Рис. 4. Изображение на поле слева от текста

В примере 4 ширина изображения составляет 90 пикселей, а ширина колонки, где он располагается — 110 пикселей. Разница между ними обеспечивает нам нужный отступ от текста до картинки. Чтобы атрибуты таблицы cellspacing и cellpadding не вмешивались в процесс, их значения лучше обнулить. Обратите внимание, что в ячейках задается выравнивание по высоте — vertical-align: top.

CSS-стили: Данный пример более предпочтителен и оптимален. Здесь нам потребуется два слоя <div>, параметры которых мы укажем через CSS. В одном слое будет находиться изображение, а в другом текст. Как это работает, смотрите в примере 5:

Пример 5. Размещение изображения на поле с слоев и CSS-стилей

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<code><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Рисунок на поле</title>
  <style type="text/css">
   #pic{
    float: left; /* Обтекание картинки текстом */
   }
   #text{
    margin-left: 110px; /* Отступ от левого края */
   }
  </style>
 </head>
 <body>
  <div>
   <img src="images/igels.png" alt="Вы не поверите, но это ёжик">
  </div>
  <div>
   Ёжики защищены от внешней агрессии колючим панцирем, который спасает их от тех, кто хочет поживиться вкусным и нежным мясом ежа. Но не стоит считать это животное и совершенно безобидным, все-таки это хищник. Да, он не питается волками и лисами, но только потому, что уступает им в размерах. А вот закусить червячком или даже змеей ему вполне под силу.
  </div>
 </body>
</html></code>

<code><!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»> <html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″> <title>Рисунок на поле</title> <style type=»text/css»> #pic{ float: left; /* Обтекание картинки текстом */ } #text{ margin-left: 110px; /* Отступ от левого края */ } </style> </head> <body> <div> <img src=»images/igels.png» alt=»Вы не поверите, но это ёжик»> </div> <div> Ёжики защищены от внешней агрессии колючим панцирем, который спасает их от тех, кто хочет поживиться вкусным и нежным мясом ежа. Но не стоит считать это животное и совершенно безобидным, все-таки это хищник. Да, он не питается волками и лисами, но только потому, что уступает им в размерах. А вот закусить червячком или даже змеей ему вполне под силу. </div> </body> </html></code>

Свойство float:left для слоя #pic нужно, чтобы задать примыкание изображения к левому краю документа, а верхняя строка текста совпадала с верхней строкой изображения. Без этого свойства слой #text опускается вниз на высоту изображения. Также для слоя #text указываем отступ слева margin-left:110px на расстояние 110 пикселей, чтобы там текст не налазил на изображение. Если изображение нужно разместить в правом поле, то указываем float:right для #pic и margin-right:110px для #text.

P.S.: Согласно спецификации HTML4 изображения должны помещаться внутри блочных элементов таких как div или p.

Передвигаем картинку. Двигаем рисунок.

PHP урок № 171

На мой взгляд самый простой способ разместить картинку в нужном месте странице — это использовать CSS.

CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — технология описания внешнего вида документа, написанного языком разметки. Преимущественно используется как средство оформления веб-страниц в формате HTML и XHTML, но может применяться с любыми видами документов в формате XML, включая SVG и XUL.

Более подробно ознакомится с CSS можно здесь.

На это тему написано огромное количество книг, изучая HTML нельзя обойти CSS это не правильно. Так что начинается всё с HTML. :)Я начну рассказ то же с применения HTML. Как известно в HTML есть теги, которые формируют вид страницы в браузере.

<p></p>
<h2></h2> 
<div></div> 
<table></table>
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
<tr></tr>
<th></th>
<td></td>

У каждой пары тегов есть свои атрибуты, а в свою очередь у каждого атрибута есть свои аргументы, немного путано, но эта цепочка именно так и работает. Весь текст находящийся между парой тегов исполняется и представляется в браузере согласно языка HTML и стилем браузера по умолчанию.

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

У всех тегов описанных в листинге №1 есть атрибут align он отвечает за расположение текста или картинки в пространстве страницы ПО ГОРИЗОНТАЛИ. Раз есть атрибут тега, значит должен быть и аргумент этого атрибута.

Аргументы атрибута align

Выравнивание текста по центру. Текст помещается по центру горизонтали окна браузера или контейнера, где расположен текстовый блок. Строки текста словно нанизываются на невидимую ось, которая проходит по центру веб-страницы. Подобный способ выравнивания активно используется в заголовках и различных подписях, вроде под рисуночных, он придает официальный и солидный вид оформлению текста. Во всех других случаях выравнивание по центру применяется редко по той причине, что читать большой объем такого текста неудобно.

Выравнивание по ширине, что означает одновременное выравнивание по левому и правому краю. Чтобы произвести это действие браузер в этом случае добавляет пробелы между словами.

Выравнивание текста по левому краю. В этом случае строки текста выравнивается по левому краю, а правый край располагается «лесенкой». Такой способ выравнивания является наиболее популярным на сайтах, поскольку позволяет пользователю легко отыскивать взглядом новую строку и комфортно читать большой текст.

Выравнивание текста по правому краю. Этот способ выравнивания выступает в роли антагониста предыдущему типу. А именно, строки текста равняются по правому краю, а левый остается «рваным». Из-за того, что левый край не выровнен, а именно с него начинается чтение новых строк, такой текст читать труднее, чем, если бы он был выровнен по левому краю. Поэтому выравнивание по правому краю применяется обычно для коротких заголовков объемом не более трех строк. Мы не рассматриваем специфичные сайты, где текст приходится читать справа налево, там возможно подобный способ выравнивания и пригодится. Но где вы у нас в стране видели такие сайты.

Это картинка в таблице с отступами справа и слева. Здесь используются атрибуты hspace — это отступы по горизонтали и vspace — отступ по вертикали, причем сразу с двух сторон 70->картинка





Теперь используем CSS. Поместим картинку для начала в контейнер или в блок — в этом нам поможет тег див. Он собственно и является своего рода контейнером или ещё называют блоком. Про блочную вёрстку слышали, вот это с его помощью делается.

Синий край это границы контейнера (div), пространство внутри, которое заштриховано, есть то пространство, на которое надо отступить внутри контейнера от его границ (стрелками указана величина в пикселах). Таким образом и происходит размещение контента внутри блока.

Листинг № 1 — Размещение картинки с помощью CSS. Файл стиля.

Рассмотрим подробнее. Первые две строки для нас сейчас не важны их пропускаем. Далее идёт точка — это обозначение класса в CSS. Примерно читается так: класс gif имеет следующие атрибуты:

  • padding-top: 200px; — это отступ сверху
  • padding-left: 150px; — это отступ слева
  • width: 350px; — это ширина самого контейнера
  • padding-bottom: 47px; — это отступ снизу

Так же есть атрибут padding-right: — это отступ справа. Ну теперь наверно стало картина прояснятся как можно подвинуть картинку, т.е. меняя аргументы атрибутов, те самые циферки что измеряются в пикселах, хотя кстати то же не обязательно в них. Помимо того, что мы рассмотрели атрибуты которые применяются с тегом див, которые отвечают за расположение объекта внутри контейнера. Существуют ещё атрибуты которые в свою очередь двигают контейнер снаружи относительно страницы это margin.

Листинг № 2 — Это весь HTML-код используемый для установки картинки в нужном месте страницы.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Untitled Document</title>
<link href="/hio.css" rel="stylesheet" type="text/css">
</head>

<body>
<div><img src="/images/Avatar1/Ava0002.gif" border=0></div>
</body>
</html>

Листинг № 3 — Таблица CSS стилей для последнего примера. (Файл hio.css)

Рекомендованные уроки этого раздела:

Комментарии

саша 15.03.2012 15:47:46

прикольныый сайт

html — изображение CSS и текст справа

Ваш код мне кажется довольно странным. Я предполагаю, что вы хотите использовать изображения для ссылок, да? В этом случае я бы предложил изменить ваш HTML на этот:

Чтобы добавить текст непосредственно слева от изображений, мы просто записываем его:

  

    
    Текст 

    
    Текст 

    
    Текст 

    
    Текст

Сделав это, вы сможете получить желаемый результат с помощью этого CSS:

  #showbox {
    отступ: 0;
    ширина: 973;
    высота: 46 пикселей;
    z-индекс: 12;
    положение: относительное;
}
#showbox.один {
    позиция: абсолютная;
    ширина: авто;
    высота: 46 пикселей;
    верх: 0px;
    слева: 0px;
}
#showbox .two {
    позиция: абсолютная;
    ширина: авто;
    высота: 46 пикселей;
    верх: 0;
    слева: 240 пикселей;
}
#showbox a, img {
    плыть налево;
}

Чтобы продемонстрировать, я создал этот JSFiddle. Надеюсь, это поможет!

РЕДАКТИРОВАТЬ:

Чтобы расположить текст посередине изображения по вертикали, нам нужно немного повозиться; вертикальное выравнивание — не самая сильная сторона HTML.Но это возможно.

Сначала вам нужно немного отредактировать CSS. Для каждого класса . Один , . Два , . Три , . Четыре необходимо добавить

.
  дисплей: таблица-ячейка;
вертикальное выравнивание: по центру;

Дисплей : таблица-ячейка; вертикальное выравнивание: по центру; обеспечивает позиционирование элементов внутри поля, так сказать, по вертикали посередине. К сожалению, этого недостаточно (я уже упоминал, что вертикальное выравнивание — не самая сильная сторона HTML?).Нам также нужно добавить

  #showbox p {
    положение: относительное;
    float: right;
}

в CSS. Мы также добавляем margin-right: 5px; в #showbox img, пункт в CSS:

  #showbox a, img {
    плыть налево;
    маржа справа: 5 пикселей;
}

Это необходимо для того, чтобы весь HTML и текст справа от изображения или ссылки были сдвинуты на 5 пикселей от изображения или ссылки.

И, наконец, в HTML мы просто помещаем текст в теги

, например:

  

    

          
        
 Текст 

    

    

          
        
 Текст 

    

    

          
        
 Текст 

    

    

          
        
 Текст

Для демонстрации я обновил JSFiddle.

html — текст слева и изображение справа 

  HTML, тело, div, диапазон, апплет, объект, iframe,
h2, h3, h4, h5, h5, h6, p, цитата, pre,
a, abbr, аббревиатура, адрес, большой, цитировать, код,
del, dfn, em, img, ins, kbd, q, s, samp,
маленький, удар, сильный, sub, sup, tt, var,
б, ю, я, центр,
dl, dt, dd, ol, ul, li,
набор полей, форма, метка, легенда,
таблица, подпись, tbody, tfoot, thead, tr, th, td,
статья, в сторону, холст, детали, вставка,
рисунок, figcaption, нижний колонтитул, заголовок, hgroup,
меню, навигация, вывод, рубин, раздел, сводка,
time, mark, audio, video {
маржа: 0;
отступ: 0;
граница: 0;
размер шрифта: 100%;
шрифт: наследовать;
вертикальное выравнивание: базовая линия;
}
/ * Сброс отображаемой роли HTML5 для старых браузеров * /
article, aside, details, figcaption, figure,
нижний колонтитул, заголовок, hgroup, меню, навигация, раздел {
дисплей: блок;
}
тело {
высота строки: 1;
}
ol, ul {
стиль списка: нет;
}
blockquote, q {
цитаты: нет;
}
цитата: до, цитата: после,
q: до, q: после {
содержание: '';
содержание: нет;
}
Таблица {
граница-коллапс: коллапс;
граница-интервал: 0;
}

ул.topnav {
тип-стиль-список: нет;
/ * позиция: фиксированная; * /
переполнение: скрыто;
маржа: 0;
отступ: 0 0 0 400 пикселей;
цвет фона: # 110E0C;
   / * ширина: 100%;
   верх: 0; * /
}

ul.topnav li {
плыть налево;
}

ul.topnav li a {
дисплей: блок;
цвет белый;
выравнивание текста: центр;
текстовое оформление: нет;
отступ: 14 пикселей 30 пикселей;
текст-преобразование: прописные буквы;
/ * цвет фона: # 3F4345; * /
}

ул.topnav li a: hover {
цвет фона: # C8D0D7;
цвет: # D8610C;
нижняя граница: сплошной 1px # D8610C;
}

ul.topnav li a.active {
цвет фона: # C8D0D7;
цвет: # D8610C;
нижняя граница: сплошной 1px # D8610C;
}


header {
ширина: 100%;
отступ: 2 пикселя;
черный цвет;
цвет фона: # C8D0D7;
выравнивание текста: центр;
переполнение: скрыто;
}

header img {

высота: 150 пикселей;
ширина: 150 пикселей;
маржа слева: 900 пикселей;
плыть налево;

}
header p {
отступ: 40 пикселей;
}

раздел {
цвет фона: # 333333;
высота: 500 пикселей;
}

section img {
граница: сплошной белый 1px;
высота: 400 пикселей;
ширина: 500 пикселей;
}

section h4 {
цвет белый;
}

section p {
цвет белый;
высота: 170 пикселей;
ширина: 600 пикселей;
отступ: 0;
маржа: 0;
высота строки: 20 пикселей;
вертикальное выравнивание: сверху;
}

.основная тема {
граница: 2 пикселя сплошного зеленого цвета;
ширина: 1541 пикс;
маржа: 0 авто;
ясно: оба;
}

.left-text {
вертикальное выравнивание: по центру;
  плыть налево;
}

.right-picture {

}

.right-picture> img {
дисплей: блок;
}

.Чисто{
ясно: оба;
}  
  <раздел>




 
 Поклонники Дэдпула ходатайствуют о приглашении супергероя на роль SNL 
 


Поклонники Дэдпула хотят, чтобы его супергерой проводил субботу вечером в прямом эфире - то есть Дэдпул, а не Райан Рейнольдс.Поклонники Merc With a Mouth, которые привели фильм Marvel к историческому дебюту в прокате, запустили петицию Change.org, призывающую антигероя провести предстоящий эпизод скетч-шоу NBC. «Мы все уже видели трейлеры, обложки журналов, вирусные видеоролики и рекламные щиты, так что же остается делать Дэдпулу (Райан Рейнольдс)?» - спрашивает создатель Эндрю Стедж в петиции, которая адресована SNL, создателю Лорну Майклсу, родителю.