Отменяем обтекание текстом картинки. Автор: Александр Головко Дата публикации: 0. Задача. Сверстать блок, состоящий из картинки и текста, причем текст не должен обтекать картинку.

При отсутствии картинки текст занимает всю отведенную ширину. Решение. Будем считать, что левая колонка может содержать не только картинку, а что- либо еще.

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

Поэтому HTML у нас будет выглядеть так (вообще говоря, класс photo можно было бы присвоить самому img и обойтись без div'а). С левой колонкой все ясно.

Но если текста больше, он будет «подныривать» под рисунок (см. Но в этом случае, если не прописать ширину текст упадет под рисунок! Действительно, в некоторых ситуациях такой вариант проходит. Например, если размер картинки все- таки задан.

Обтекание картинок текстом в HTML — размещение картинок на веб-странице по левому или правому краю страницы таким образом, . Часто при верстке страниц необходимо решить задачу обтекания текстом картинки. Для решения этой задачи средствами CSS необходимо присвоить .

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

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

Специально для него колонке устанавливаем layout, например «флоатим» (ширину при этом задавать не понадобится). Итак, решение поставленной задачи выглядит так. Проверено в: IE 6- 8. Firefox 3. 0- 3. 6. Opera 9. 5- 1. 0.

Safari 4. Chrome 5. Плюс. Простота. Получаем нужный эффект (в том числе и при отсутствии рисунка), причем не понадобится использовать сестринский селектор. Минус. Overflow: hidden не применимо, если в текстовой колонке есть, например, выпадающие окошки или какие- нибудь другие выступающие элементы. Альтернативное решение. Update 7. 1. 1. 2. Тимур, Vladimir. Тот же эффект отмены обтекания получим, если использовать для текстовой колонки display: table- cell; (или table).

Для IE6- 7 опять же придется устанавливать layout. Строка невалидна */. То есть, у всего нашего текста с картинкой должен быть контейнер. Как Добавить Свойство Комплекта Lineage 2 Zip.