1. Главная
  2. Форумы
  3. Техподдержка Drupal
  4. Решение проблем

Вопрос для гуру css

Главные вкладки

Аватар пользователя andribas@drupal.org andribas@drupal.org 21 октября 2010 в 8:50

Скажите, как заставить текст обтекать картинку слева?

.header {
 font-size: 18px;
 font-weight: bold;
}
.img {
 display: inline-block;
 float: left;
 position: relative;
 top: 0px;
 margin-right: 12px;
}
<div class="header"> <div class="img"><img src="1.jpg" /></div>Очень длинный заголовок</div>
<div class="text">дальше пошел текст</div>

Должно получиться так:

В принципе, оно и работает, но только в IE6. Как для всех сделать?
Идеальным вариантом было бы вообще картинку из дива текста вытащить, чтобы отдельно было. Это реально?

ВложениеРазмер
Иконка изображения test-image.jpg25.52 КБ

Комментарии

Аватар пользователя digital_sword digital_sword 21 октября 2010 в 9:09

а как картинка в див с заголовком залезла?
У меня в браузере и заголовок и текст обтекают картинку с правой стороны.

Аватар пользователя andribas@drupal.org andribas@drupal.org 10 ноября 2015 в 11:47

"oboroten" wrote:

поменяйте местами див с картинкой и текст заголовка тоесть -

Попробовал поменять - тогда текст сверху картинки встает в ие и фф - обтекания справа от картинки нет.
Вот как должно быть (но работает только в ие):

вот если картинку в конец засунуть:

Аватар пользователя andribas@drupal.org andribas@drupal.org 21 октября 2010 в 9:30

"digital_sword" wrote:
так у вас картинка туда залезает? CCK, другое что...

ну я ее специально туда засунул и пробел поставил перед ней, чтобы она relative к этому диву с текстом была. При этом если заголовок в span или div засунуть отдельно, то не работает.
Как этот эффект в css делается?

Аватар пользователя andribas@drupal.org andribas@drupal.org 10 ноября 2015 в 11:47

Вот полный код чтобы проверить:

<html>
<head>
<style type="text/css">
.block {
 width: 450px;
 height: 180px;
 border: 1px solid black;
}
.img {
 display: inline-block;
 float: left;
 position: relative;
 top: 0px;
 margin-right: 12px;
 width: 240px;
}
.header {
 font-family: Arial;
 font-size: 18px;
 font-weight: bold;
}
.text {
 font-family: Arial;
 font-size: 12px;
}
</style>
</head>
<body>
<div class="block">
<div class="header"> Вчера официально прекратил существование Приволжско-Уральский военный округ<div class="img"><img src="1.jpg" width="240"></div></div>

<div class="text">В Челябинске за прошедшие сутки зарегистрировано 11 дорожно-транспортных происшествий, в которых 11 человек получили ранения и один человек погиб.</div>
</div>

</body>
</html>

и картинка:

Аватар пользователя q2_faith q2_faith 21 октября 2010 в 12:36

уберите float для картинки и задайте для текста inline-block
а дальше паддингами все выровняйте
p.s. зачем картинку в header пихать?)

<div class="header">&nbsp;Очень длинный заголовок</div>
<div class="img"><img src="1.jpg" /></div>
<div class="text">дальше пошел текст</div>

было бы правильнее имхо...

Аватар пользователя andribas@drupal.org andribas@drupal.org 21 октября 2010 в 12:52

"q2_faith" wrote:
уберите float для картинки и задайте для текста inline-block

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

Аватар пользователя andribas@drupal.org andribas@drupal.org 21 октября 2010 в 13:07

"q2_faith" wrote:
тогда используйте position: absolute для картинки, а для текста float: right

наложение получается...

Ладно, всем спасибо, видимо этого добиться очень трудно. Сделаю обтекание только текстом, а заголовок вверху, просто думал это несложно сделать.