Yuriy ([info]yuriy_drz) wrote in [info]ru_webdev,
@ 2007-04-02 16:40:00
Previous Entry  Add to memories!  Tell a Friend!  Next Entry
Как сделать обтекание текстом картинки?
Всем привет. Необходимо сделать такое обтекание.

Но проблема в том, что картинку в текст вставить (теоретически) невозможно. Размер текста тоже неизвестен. И, напоследок, картинка - это один контейнер. Весь текст - другой. Т.е. текст на несколько контейнеров разбивать нельзя. Текст генерится динамически скриптовым языком (в данном случае PHP). Если текста будет меньше, то картинка все рано должно оставаться на своем месте. Внимание знатоки, вопрос, КАК ЭТО МОЖНО СДЕЛАТЬ? Картинка ровная, имеет прямоугольную форму. HTML код выглядит так :
<div>
  <img src="..." />
  <p>content goes here</p>
</div>


content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here
________ content goes here content goes here content goes here content goes here content
| | content goes here content goes here content goes here content goes here
| | content goes here content goes here content goes here content goes here con
|_______| content goes here content goes here content goes here content goes here content
content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here contentcontent goes here content goes here content goes here content goes here content goes here content


(Post a new comment)


[info]nchaly
2007-04-02 02:08 pm UTC (link)
float:left, но если картинка ставлена до начала текста, она будет выровнена по верхнему краю. Теоретически можно вставлять тэг с картинкой после N-го предложения (у вас оно заканчивается на "content goes here":)

(Reply to this)(Thread)


[info]yuriy_drz
2007-04-02 02:33 pm UTC (link)
Одно из условий - картинку внутрь текста нельзя вставлять

(Reply to this)(Parent)(Thread)


[info]nchaly
2007-04-02 02:38 pm UTC (link)
<div>

[картинка]

[текст]

</div>

Картинка не в тексте, будет выровнена по правому краю.

(Reply to this)(Parent)(Thread)


[info]nchaly
2007-04-02 02:40 pm UTC (link)
по верхнему, неправильно написал. почитав коменты понял, что надо картинку сделать неровной.

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

(Reply to this)(Parent)


[info]sloninzia
2007-04-02 02:10 pm UTC (link)
< img src="image.jpg" style="float:left" >

(Reply to this)(Thread)


[info]yuriy_drz
2007-04-02 02:34 pm UTC (link)
спасибо, но не в этом случае :(

(Reply to this)(Parent)(Thread)


[info]sloninzia
2007-04-02 11:57 pm UTC (link)
непонимаю что надо, но может это поможет:
< br style="clear:both;" >

(Reply to this)(Parent)


[info]de-oz.blogspot.com
2007-04-11 10:23 am UTC (link)
шо, вордпресс вырезает style="float:left" ?

(Reply to this)(Parent)(Thread)


[info]yuriy_drz
2007-04-11 10:33 am UTC (link)
вордпресс тут ни при чем.

(Reply to this)(Parent)


[info]9000
2007-04-02 02:24 pm UTC (link)
Если картинка имеет неровную форму, и хочется сделать такое же неровное обтекание, можно картинку нарезать на полосы и к каждой применить описанный выше приём с float.

(Reply to this)(Thread)


[info]_1313
2007-04-02 02:27 pm UTC (link)
по-моему, речь не о неровной картинке, а о том, как, не трогая хтмля, запихать картинку с флоатом в середину абзаца текста

(Reply to this)(Parent)(Thread)


[info]9000
2007-04-02 02:37 pm UTC (link)
О, так понятнее. Интересно, можно ли совместить float по горизонтали с relative по вертикали, чтобы отъехать, скажем, на 30% высоты контейнера, объемлущего как текст, так и картинку?

(Reply to this)(Parent)(Thread)


[info]_1313
2007-04-02 02:49 pm UTC (link)
если мы используем позишн, то мы вылетаем из, как это, "основного потока" документа. короче, картинка будет на текст наезжать =)

(Reply to this)(Parent)(Thread)


[info]yuriy_drz
2007-04-02 03:12 pm UTC (link)
да relative не влияет на основной поток :(

(Reply to this)(Parent)


[info]yuriy_drz
2007-04-02 02:31 pm UTC (link)
нет форма ровная, просто сдвинулось :)

(Reply to this)(Parent)


[info]_1313
2007-04-02 02:26 pm UTC (link)
без разбиения текста на параграфы будет сложно. возможно, тонкая магия с отрицательными марджинами может помочь, но я бы предложил попробовать разбить текст (яваскриптом, может быть?), а потом поставить картинку между нужными параграфами

(Reply to this)(Thread)


[info]yuriy_drz
2007-04-02 02:33 pm UTC (link)
пробовал отрицательные маржины - в фф картинка наезжает на текст, в ие - текст на картинку. Хотелось бы найти решения без разбиения текста.

(Reply to this)(Parent)(Thread)


[info]_1313
2007-04-02 02:49 pm UTC (link)
боюсь, что в таких условиях это может быть нереально. ну, разве что какие-то костыли в духе отбить пробелами в тексте дырку и попасть в дырку относительно спозиционированной картинкой =)

(Reply to this)(Parent)


[info]alf_kadett
2007-04-02 02:56 pm UTC (link)
под кат!

(Reply to this)(Thread)


[info]yuriy_drz
2007-04-02 03:00 pm UTC (link)
сделано

(Reply to this)(Parent)(Thread)


[info]alf_kadett
2007-04-02 03:03 pm UTC (link)
Спасибо. Извините за несдержанность :)

(Reply to this)(Parent)(Thread)


[info]yuriy_drz
2007-04-02 03:13 pm UTC (link)
нет проблем :)

(Reply to this)(Parent)


Create an Account
Forgot your login?
Login w/ OpenID
English • Español • Deutsch • Русский…