Как убрать обтекание текста вокруг изображения на чистом CSS | http://malinichev.ru/images/css/css-remove-wrap-around-image.png
Я очень часто пишу на форумах сообщения, и всегда приходится отвечать на один и тот же вопрос по сто раз. Вопрос о том, как убрать обтекание текста вокруг картинки, если у картинки стоит CSS свойство float: left.
Если Вы уже представили про что мы будем говорить сейчас, то хочу отметить что способ который будет тут рассматриваться не работает в браузере IE 6, я лично проверял...
И так, если Вы слышали про свойство CSS overflow, то наверное сами знаете ответ на вопрос, а если нет, то читайте дальше.
Для уничтожения обтекания текста вокруг картинки у которой стоит свойство float: left я знаю один способ, и он наверное единственный, это поставить у текста свойство overflow: hidden, кто знает ещё способы - пишите в комментариях.
Давайте напишем примерный CSS-код:
.block-1, .block-2 {
padding: 10px;
border: 1px solid black;
}
.block-2 p {
overflow: hidden;
}
img {
float: left;
height: 50px;
width: 50px;
}
И примерный HTML-каркас:
<div class = "block-1">
<img src = "путь до вашей картинки" />
<p>Напишите много текста чтобы увидеть разницу</p>
</div>
<div class = "block-2">
<img src = "путь до вашей картинки" />
<p>Напишите много текста чтобы увидеть разницу</p>
</div>
Если вы запустите этот пример то точно увидите что всё работает, и картинка больше не обтекается текстом.