Сверстать блок, состоящий из картинки и текста, причем текст не должен обтекать картинку.

Слева правильно, справа — нет

Дополнительное условие: ширина ни текста, ни картинки строго не определена. При отсутствии картинки текст занимает всю отведенную ширину.

Решение

Пробуем написать стили. С левой колонкой все ясно:

Photo { float: left; /* задаем обтекание */ margin:10px; /* отступ для красоты */ display:inline; /* для IE6, чтоб отступ слева не удвоился */ }

Теперь рисунок стал слева, а текст обошел его справа. Но если текста больше, он будет «подныривать» под рисунок (см. картинку выше), а этого-то нам и не нужно.

Первое, что приходит в голову — «зафлоатить» и текст. Но в этом случае, если не прописать ширину текст упадет под рисунок!

float:left/right будет требовать ширину — иначе ничего не получиться!

Думаем дальше… Хорошим решением может показаться.description{ : XXXpx}. Действительно, в некоторых ситуациях такой вариант проходит. Например, если размер картинки все-таки задан. Предположим, это резиновый блок новостей. Картинка не может быть шире, скажем 200px, а уже текст тянется и занимает всю оставшуюся ширину.

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

Запретить обтекание можно просто добавив :hidden; для текстовой колонки. Тем самым мы установим для нее новый контекст форматирования (подробнее эта тема скоро будет раскрыта).

Единственный браузер, который среагирует на это неправильно — это конечно IE6. Специально для него колонке устанавливаем , например «флоатим» (ширину при этом задавать не понадобится).

Итак, решение поставленной задачи выглядит так:

Photo { float: left; /* задаем обтекание */ margin:10px; /* отступ для красоты */ display:inline; /* для IE6, чтоб отступ слева не удвоился */ } .description{ overflow:hidden; } * html .description{ float:left; }

Как всегда, в боевых условиях вместо используем .

Обтекание рисунка текстом. Мы с вами уже многому научились. Как создать диаграмму в Word, Как создать красивую рамку в Word, Как нарисовать схему в Word 2003, Как изменить цвет страницы в Word, и многому другому. А сейчас хотелось бы узнать, как сделать обтекание рисунка текстом?

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

И так вы пишете статью и вставляете в неё картинку. Но, что-то вас не устраивает. Картинка смотрится как-то не так. Лучше было бы, чтобы текст обрамлял её. Для начала закиньте картинку на страницу и выделите её (щелкните по ней мышкой). Потом внизу откройте панель Рисование выберите Обтекание текстом . Какое именно обтекание тестом выбрать – это уже как вам нравиться.

• Рисунок в тексте.
• Текст вокруг рамки.
• Текст по контуру рисунка.
• Рисунок за текстом.
• Рисунок перед текстом.
• Текст сверху и снизу.
• Сквозное обтекание текстом.
• Изменить контур обтекания.

Подберите то, что вам нравиться.

Word 2007/2010

Выделите картинку. Откройте меню Разметка страницы и перейдите на блок Упорядочить .

Нажмите на маленькую стрелочку на кнопке Обтекание текстом .

С помощью свойства float можно выровнять изображение по левому (img {float: left; margin: 0 [x] [y] 0;}) или по правому (img {float: right; margin: 0 0 [x] [y];}) краю веб-страницы или блока-контейнера.

Чтобы картинка не сливалась с текстом, для нее добавляют соответствующие значения свойства margin .

Отменить обтекание следующего блока текста или заголовка можно при помощи конструкции h2, p {clear: left;} или h2, p {clear: right;} .

Также можно расположить изображение по центру страницы img {display: block; margin: 0 auto;} , или сделать обтекание картинки текстом с двух сторон, обернув каждый блок текста в отдельный абзац.

Разметка HTML

List of towns in England

Amersham

Amersham is ....jpg">Buxton is ...

Chesterfield

Chesterfield is ....jpg">

It has ....jpg">Dartmouth is ...

CSS стили

Body { margin: 0; background: #FFF8E8; padding: 0 20px; font-size: 90%; counter-reset: h2; /*создаем счетчик для любого заголовка h2*/ } h1 { font-family: "Lora", serif; color: #564C4A; font-weight: 300; } h2 { font-family: "Lora", serif; color: #B00D22; font-weight: 300; clear: both; /* отменяем обтекание с обеих сторон */ padding: 1em 0 0.25em; border-bottom: 2px solid; counter-increment: h2; /* задаем увеличение нумерации заголовков h2 на единицу */ } h2:before { content: " " counter(h2) ". "; /* добавляем в начале каждого заголовка текущее значение счетчика и точку с пробелом */ } p { font-family: arial; color: #785F5B; line-height: 1.3; } /********** картинка слева **********/ .left { float: left; margin: 0 1em 1em 0; } /********** картинка справа **********/ .right { float: right; margin: 0 0 1em 1em; } /********** картинка между текста **********/ .columns { float: left; max-width: 30%; margin: 0; } .img-center { float: left; margin: 0 1.5% 0 1.5%; max-width: 37%; } /********** картинка по центру********* */ .center { display: block; margin: 0 auto 1.5%; }

Обтекание картинки с двух сторон

Приём заключается в том, что текст помещается в два блока одинаковой ширины с небольшим промежутком посередине. С помощью псевдоэлементов:before и:before в каждый блок добавляется заглушка шириной в половину картинки и высотой, равной высоте картинки. Картинка абсолютно позиционируется таким образом, что закрывает собой эти пустые блоки, в результате чего и получается эффект обтекания с двух сторон.

Разметка HTML

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

или подробно о процессе обтекания HTML картинок и текстов

Глава содержит примеры обтекания текста картинкой из области Гипертекстовой разметки.

В меню слева вы найдете современные и очень подробные уроки по HTML.

Они позволят вам создать свой сайт с чистого листа , а пока смотрим немного ниже.

В данной главе мы рассмотрим

Прежде, чем приступить к HTML обтеканию , предлагаю ознакомиться с информацией.

Это может быть интересно.

Восход и развитие сети интернет

Интернет непрерывно расширяется. Он становится глобальной сетью за счет того, что к нему постоянно присоединяются отдельные частные лица и крупные коммерческие структуры, локальные и региональные компьютерные сети со всего Мира. В 1993 году была разработана технология Word Wide Web, которая превратилась в одну из самых важных служб в рамках Всемирной паутины. Данная структура спровоцировала рост популярности технологии интернет , вызвала небывалый интерес со стороны будущих веб-дизайнеров и разработчиков, со стороны миллионов людей, которые впоследствии занялись созданием сайтов для своего собственного удовольствия и на благо общества. Интернет стал неотъемлемой частью современной цивилизации. Проникая в сферу образования, торговли, связи, услуг, Глобальная сеть создает новые формы общения, способы обучения, торговли и развлечений. Интернет-поколение является настоящим социокультурным феноменом наших дней и это поколение не может представить себе жизнь без Всемирной сети.

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

Результат:

Атрибуты и значения

• align="top" - выравнивает картинку и текст по верху.
• align="middle" - выравнивает картинку и текст по центру, по вертикали.
• align="bottom" - выравнивает картинку и текст по низу.

Обратите внимание на способ подгрузки изображения: ../images/2121.png . Во-первых, использован формат PNG (.png). Во-вторых, изображение находится в отдельной папке, то есть документ у меня в одной папке, а изображение в другой. В таких ситуациях очень важно правильно указать путь от документа к подгружаемой картинке, что и было сделано: первые две точки.. определяют выход из папки где находится документ (все уроки, они же страницы, они же документы курса по HTML у меня находятся в одной папке, CSS - в другой, изображения - в третьей и так далее); /images/ - не что иное, как название папки с изображениями, а 2121.png - полное имя файла самой картинки.

Способы горизонтального обтекания HTML текста

Результат:

Пример HTML обтекания текста картинкой справа

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