Jump to content
  • 0

текст и картинка


Iton
 Share

Question

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

Большая длинная

строка текста1

теперь предположим что справа от этого текста есть картинка.

Большая длинная строка текста1 КАРТИНКА

Задача:

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

было:

Большая длинная строка текста1 КАРТИНКА

пользователь сузил окно и стало

Большая длинная КАРТИНКА

строка текста1

но у меня никак так не получается сделать:)

Link to comment
Share on other sites

11 answers to this question

Recommended Posts

  • 0

попробуй поместить картинку и текст в два разных div' а , и варьировать их параметры. Для того чтобы они были рядышком используй display:table-cell; или с помощью float играйся. У меня получилось

Link to comment
Share on other sites

  • 0

к сожелению прмер показать не могу :) все локально делаю)

дам скрин:http://iton.ho.com.ua/1.jpg

вот как сейчас реализовано

Секреты инвестирования в недвижимость

ipbr.jpg"

на первом рисунке (*верхний) видно как все выглядит, если окно раскрыто на всю ширину

на левом нижнем - видно что будет, если уменьшать ширину окна

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

вот я и хочу совместить 2-й и 3-й рисунки по принципу:

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

Link to comment
Share on other sites

  • 0
Для того чтобы они были рядышком используй display:table-cell; или с помощью float играйся. У меня получилось

умничка!

position:absolute;left:160px;top:0px

развратник

автор, вам уже сказали как сделать два слоя "рядышком")

Link to comment
Share on other sites

  • 0

сдела вот так, но вышло что теперь сначала они стоят как надо (один за другим), но когда начинаеш уменьщать размер окна, то картинка сползает под текст,а когда еще уменьшить то уже тогда и текст начинает уменьшаться. а надо что бы одновременно

Секреты инвестирования в недвижимость

ipbr.jpg"

Link to comment
Share on other sites

  • 0

Iton, а если так:

<div id="Layer0" style="display:table;position:absolute;top:0;left:155px">
<div id="Layer1" style="display:table-cell;vertical-align:top"><h1 style="font:bold 13px Tahoma;display:inline;padding:5px;margin:0px;color:#900;font-style:italic;float:left">Секреты инвестирования
в недвижимость</h1></div>
<div id="Layer2" style="display:table-cell"><a href="http://tv1.com.ua/programs/nerukhomist.html" target="_blank"><img src="/img/ipbr.jpg" alt="Перший діловий телевізійний канал"></a></div>
</div>

Link to comment
Share on other sites

  • 0

вышел из положения абсолютным позиционированием 2-х тегов div

<div style="position:absolute;top:0;left:147px;vertical-align:top"><h1 style="font:bold 13px Tahoma;display:inline;padding:5px;margin:0px;color:#900;font-style:italic;float:left">Секреты инвестирования
в недвижимость</h1></div>

<div style="position:absolute;top:1;left:335px"><a href="http://tv1.com.ua/programs/nerukhomist.html" target="_blank"><img src="/img/ipbr.jpg" alt="Перший діловий телевізійний канал"></a></div>

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy