Текст обтекает картинку html – Img — Html тег для вставки картинки (Src), выравнивания и обтекание ее текстом (align), а так же задания фона (background)

Обтекание картинки текстом. Как убрать? — Хабр Q&A

У меня выходит вот так:

надо убрать текст который под картинкой.

вот код:

<ul>
		<div>
			<li>
				<img src="man.png">
				<span>Sasha</span>
				<em>a month ago</em>
				<br>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

				<ul>
					<div>
						<li>
							<img src="man.png">
							<span>Ulyana</span>
							<em>a 2 month ago</em>
							<br>
							Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
						</li>
					</div>
				</ul>

			</li>
		</div>
	</ul>

css:

ul li {
			list-style-type: none;
			padding: 10px;
		}
		img {
			float: left;
			margin-right: 15px;
		}

и clear: both; писала, что только не делала.

Отменяем обтекание текстом картинки — Xiper.net

Автор: Александр Головко Дата публикации: 05.11.2010

Задача

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

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

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

Решение

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


<div>
	<img src="images/pic.jpg" alt=""/>
</div>
<div>
	Текстовый блок
</div>

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


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

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

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

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

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

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

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

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

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


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

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

Демо пример. Проверено в:

  • IE 6-8
  • Firefox 3.0-3.6
  • Opera 9.5-10.5
  • Safari 4
  • Chrome 5

Плюс

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

Минус

Overflow:hidden не применимо, если в текстовой колонке есть, например, выпадающие окошки или какие-нибудь другие выступающие элементы.

Альтернативное решение

Update 7.11.2010 by Тимур, Vladimir

Тот же эффект отмены обтекания получим, если использовать для текстовой колонки display:table-cell; (или table). Для IE6-7 опять же придется устанавливать layout:


.photo {
	float: left; /* задаем обтекание */
	margin:10px; /* отступ для красоты */
	display:inline; /* для IE6, чтоб отступ слева не удвоился */
}
.description{
	display:table-cell;
	zoom:1; /* Осторожно! Строка невалидна  */
}

Но нужно иметь в виду, что если текста будет меньше чем на 1 строку, то следующий блок с текстом может расположиться справа от .description. То есть, у всего нашего текста с картинкой должен быть контейнер.

Материал

Как убрать обтекание текстом картинки?

Довольно часто перед верстальщиком ставятся определенные нестандартные задачи. Наша цель – предложить наиболее рациональное и правильное решение. Сегодня речь пойдет об особенностях обтекания текстом изображения.

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

Постановка задачи

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

Рассмотрим тот случай, когда обтекание текстом не требуется. Причем предлагаю универсальный вариант – при отсутствии картинки текст растягивается на всю ширину блока (не все же Ваши статьи будут сопровождаться иллюстрациями). Ширина блока с текстом строго не фиксирована. Ниже показано, как должен будет выглядеть наш блок.

Решение поставленной задачи

Правильное решение

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

HTML

<div>
		<img src="img.png" alt=""/>
	</div>
	<div>
		Текстовый блок
	</div>

CSS

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

Это стандартное решение для текста, который будет обтекать блок с картинкой. Выглядеть это будет следующим образом:

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

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

Плавающие блоки без определения ширины

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

Следующим неплохим вариантом будет предложение воспользоваться свойством margin-left. Так как для блога, скорее всего, все картинки в данном блоке будут унифицированы по размерам, то решение в принципе не плохое и действенное. Однако это всего лишь частный случай, так как при отсутствии картинки в статье слева будет просто пустая полоса. Это нас не устраивает. Мы же ищем универсальное решение!

А самое правильно решение, как часто бывает, является наипростейшим. Чтобы достичь нужного форматирования текстового блока – необходимо обратиться к свойству overflow со значением hidden. Не забываем про неповторимый Internet Explower. Он как обычно выделывается и требует дополнительного внимания! Чтобы наш старичок нормально отработал добавляем текстовому блоку свойство float (после обращения к свойству overflow определение фиксированной ширины не потребуется).

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

CSS

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

Недостатки метода и альтернатива

Несмотря на простоту и универсальность метода, заключающегося в применении оverflow:hidden, есть один недостаток. Свойство перестанет выполнять свои функции, если в текстовой части будут использоваться выпадающие элементы.

В этом случае потребуется альтернатива для настройки нужного форматирования. Эта методика будет основываться на функционале комбинации display:table-cell;. Это решение такое же действенное, но слегка уступает в простоте первому способу. При обращению к этому методу также необходима установка layout для работы в среде Internet Explower

CSS

.img {
	float: left; /* задаем обтекание */
	margin:10px; /* отступ для красоты */
	display:inline; /* для IE6, чтоб отступ слева не удвоился */
}
.text{
	display:table-cell;
	zoom:1; /* Осторожно! Строка невалидна  */
}

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

В каких браузерах работает?
6.0+5.0+9.5+4.0+3.0+

Оценок: 4 (средняя 5 из 5)

  • 5007 просмотров

Понравилась статья? Расскажите о ней друзьям:

Курсы по CSS (в открытом доступе)

Уровень сложности:

Средний

Еще интересное

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

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

 Список налезает на картинку, рисунок или изображение при обтекании его текстом. Например так: картинка выравнивается по левому краю (всплывает налево) – float:left;, текст списка обтекает её справа, как на скриншотах. При обтекании картинки, бу́ллеты (нумерация, маркировка) списка наползают на изображение и получается трабл (trouble, англ. – «ошибка», «проблема»). Щёлкайте картинки для полного просмотра:

Налезание нумерации (буллетов) списка на картинку Напрашивается простой способ подправить ситуацию – увеличить отступ (margin) у картинки до тех пор, пока бу́ллеты списка не «слезут с неё»

Увеличение отступа (margin) у картинки до тех пор, пока буллеты списка не слезут с неё В случае простого увеличения отступа (margin) у рисунка, вместе со списком – «уезжает» вправо и обычный текст

Оставим картинку в покое и займёмся списком, за пределы которого вылезает его маркировка. Корень проблемы кроется в редко используемом свойстве элемента списка list-style-position. Это свойство определяет положение (размещение) маркеров списка относительно его текста. list-style-position имеет два значения: outside – маркер (бу́ллет) находится за границей элемента списка, как отдельный независимый объект и inside – маркер расположен внутри элемента (маркер встроен в элемент и обтекается его текстом).

Значение list-style-position по умолчанию, для всех браузеров – outside. Маркер находится за границей элемента списка, как отдельный независимый объект. Вот потому-то он и «лезет» на нашу картинку. Margin (отступ) картинки «упирается рогом» непосредственно в текст списка, а бу́ллеты «зависают» за его пределами и попадают на поле изображения. Радикально меняет обстановку с обтеканием рисунка списком предлагаемый CSS-код:

li {
  margin: 0;
  padding-left: 1,9em;
list-style-position: inside;
  text-indent: -1em;
overflow: hidden;
  }

Этот код я нашёл в Сети по запросу «Списки и картинки с флоатами». В ходе работы с оформлением html-списков выяснилось, что для простого и нормального обтекания веб-картинки html-списком достаточно одной строчки и код прекрасно работает в сокращённом виде: li {list-style-position: inside;}. Остальные свойства нужны для контроля за расстоянием от бу́ллета до края элемента текста списка. По-умолчанию, это расстояние задаётся в дефолтных настройках программы-обозревателя интернета и может отличаться для разных видов и версий браузеров. Настоящий код является, своего рода хаком, приводящим к контролируемому и видоизменяемому кроссбраузерному отображению маркеров списков. К сожалению, так и не понял, при чём здесь overflow: hidden;. Более подробно – Расстояние от бу́ллета до соседнего объекта

Решение проблемы обтекания картинки списком — list-style-position — inside Прописать спасительный код для элемента списка (<li>) можно глобально (как в примере), или с присвоением индивидуального класса, например .list (код CSS .list ol>li,.list ul>li{list-style-position: inside;}). В первом случае, код для обтекания картинки будет распространяться глобально – на все списки на странице, во втором – только на списки класса list (class=”list”).

Разница большая:

  • При назначении глобальных свойств, действующих сразу на все списки на странице – изменяются элементы управления, созданные на основании этих свойств и списков. В результате – «уезджают» меню и менюшки навигации сайта.
  • В случае с индивидуальным классом, вида (class=”list”) – его придётся вставлять вручную в html-код требуемых списков.
  • Выручает «золотая середина» – найти в шаблоне класс текстового блока страницы и назначить свойства обтекания рисунков только для его списков. Тогда, в тексте новости (сообщения, комментария) страницы – списки будут красиво обтекать картинки и изображения, а остальная часть сайта – останется неизменной.

Изменение отступа для списка никак не отражается на его обтекании картинки Прописанное свойство для элемента списка (<li>) слегка отражается на свойствах самого списка (теги <ol>,<ul>). Оно и вестимо, ведь «втянув» маркёр внутрь списка и сделав отступ для его отображения (padding-left: 1,9em;) мы визуально уменьшили ширину списка на 1,9em. Подобная мелочь с успехом исправляется в CSS, в свойствах списков (теги <ol>,<ul>). Примечательно, что изменение отступа для списка никак не отражается на его обтекании рисунка

Перед началом работы со списком по данной теме, неплохо ему задать рамку — свойство border:2px solid #000; Перед началом работы со списком по данной теме, неплохо ему задать рамку (свойство border:2px solid #000;). Это позволит наглядно увидеть расположение бу́ллетов «до» и «после» редактирования.

Обтекание изображения списком без маркеров (буллетов). Свойство overflow: hidden; задано для всего спискаОбтекание картинки списком без маркеров (буллетов). Свойство overflow: hidden; задано для каждого элемента списка

Интересный эффект обтекания картинки даёт простое использование для списка CSS-свойства overflow: hidden;. В этом случае – обтекание выполнится нормально, но у списка будут отсутствовать маркёры (бу́ллеты). Иногда, именно такой эффект и требуется получить. Пример кода для обтекания рисунка списком, с простым overflow: hidden;

Код CSS для элементов списка
(глобально, для всей страницы):
li {overflow: hidden;}

Код CSS для всего списка
(глобально, для всей страницы):
ul,ol {overflow: hidden;}

Подобные извращения с overflow: hidden; навеяны вышестоящим кодом. На самом деле, такого-же эффекта можно достичь простым list-style: none; Это CSS-свойство убирает маркеры списка без всяких там «обрезаний». Кроме этого, свойство list-style: none; работает в любой ситуации, тогда как overflow: hidden;только в сочетании с list-style-position: outside; – когда бу́ллеты списка находятся за пределами текста списка.

Списки в HTML (XHTML)
Оформление списков в html

Создать обтекание картинки текстом на CSS

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

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

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

Чтоб все получилось отлично, изначально нужно в теги img прописать некоторые атрибуту, как align, где изначально присваивается значение, которое должно соответствовать самуму обтеканию.

И если рассматривать Атрибуту align, то здесь можно ему присвоить такие значение.

1. bottom — это значение изначально идет по умолчанию, где самая первая строка будет находиться сразу у края страницы.

2. top — Здесь наоборот идет, а точнее первая строка выйдет у верхнего края изображение, что расположение находится по левую сторону.

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

4. left — задаем выравнивание с левой стороны или края, но соответственно контент будет обтекать с правой стороны.

5. middle — выравняю, что отвечает за цент, середина картинки.

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

Это самый легкий способ, что если будите делать несколько, то каждому присваиваете свой класс. Чтоб обтекание сделать по обеим сторонам, то подключаем left и right, где также используется align атрибут.

Вот так проверил на тестовом сайте, где расположил в теле портала.

Это после, когда все сохранит визуально так смотрится.

HTML код с картинкой:

Код

<img src=»http://zornet.ru/Aben/JdPP3A0SR5eBIkFnVcMsEg.png»/>

CSS — здесь видим отступ по на 10 пикселей, также есть рамка, но это возможно кому то пригодится, если нет, то border:2px solid #е3р58; просто убираем или на прозрачный цвет выставить можно.

Код

.img-zornet_ru{
  float:left;
  margin:0 10px;
  border:2px solid #е3р58;
}


На этом все, как видите не сложно, и главный плюс, это самый удобный создать облагание картинки м применение CSS. Так как все можно редактировать, что в этом плане все очень гибко на выставление параметров.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *