DIV и вторая строка

[Artlive]

Прошу совета.

Два дива float:left. Размер первого определяется длинной слова (или слов в <NOBR>), длинна второго — на все оставшееся пространство.

Проблема: во втором диве, как только текст доходит на правого края, нет переноса на вторую строку. Вместо этого сам DIV сваливается под первый.

Как быть?

<DIV style="float:left"><NOBR>Фраза</NOBR></DIV>

<DIV style="float:left">текст</DIV>

Если бы ни зависимость ширины второго DIV'a от первого, проблем бы не было: при явном указании ширины, перенос на вторую строку во втором DIV'e есть.

[flagreit]

Как вариант:

<DIV style="float:left"><NOBR>Фраза</NOBR></DIV>
<DIV style="overflow:hidden;">текст</DIV>

а можно и табличкой

[Temiks]

.

Edited August 17, 2011 by Temiks

[psywalker]

<DIV style="float:left; width: 200px;"><NOBR>Фраза</NOBR></DIV>

<DIV style="margin-left: 200px;">текст</DIV>

[Softlink]

Artlive, не совсем понятно. Если строка первого дива заполняет всю ширину, то второй должен исчезнуть или как? Что во втором диве? Если текст, то как он должен отображаться при изменении ширины(исчезать, переноситься)? Высота родителя и дивов, как я понимаю будет фиксирована и равна размеру шрифта+паддинги?

[Temiks]

  On 8/17/2011 at 5:11 PM, psywalker said:

<DIV style="float:left; width: 200px;"><NOBR>Фраза</NOBR></DIV>

<DIV style="margin-left: 200px;">текст</DIV>

  Quote

Размер первого определяется длинной слова (или слов в <NOBR>)

То есть он не фиксированной ширины.

[amelice]

  On 8/17/2011 at 10:01 AM, Artlive said:

Прошу совета.

Два дива float:left. Размер первого определяется длинной слова (или слов в <NOBR>), длинна второго — на все оставшееся пространство.

Размер перемещаемых элементов зависит от содержимого. Длина второго перемещаемого элемента не может занять все остальное пространство если вы не укажете явную ширину в %.

Например, как вам написал psywalker, но только добавить ширину для второго блока в %.

<DIV style="float:left; width: 200px;"><NOBR>Фраза</NOBR></DIV>
<DIV style="margin-left: 200px; width:80%">текст</DIV>

  On 8/17/2011 at 10:01 AM, Artlive said:

Если бы ни зависимость ширины второго DIV'a от первого

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

[psywalker]

  On 8/17/2011 at 6:37 PM, cheburek said:

  On 8/17/2011 at 10:01 AM, Artlive said:

Прошу совета.

Два дива float:left. Размер первого определяется длинной слова (или слов в <NOBR>), длинна второго — на все оставшееся пространство.

Размер перемещаемых элементов зависит от содержимого. Длина второго перемещаемого элемента не может занять все остальное пространство если вы не укажете явную ширину в %.

Например, как вам написал psywalker, но только добавить ширину для второго блока в %.

<DIV style="float:left; width: 200px;"><NOBR>Фраза</NOBR></DIV>
<DIV style="margin-left: 200px; width:80%">текст</DIV>

А зачем правому диву размер?

[amelice]

  On 8/17/2011 at 6:40 PM, psywalker said:

А зачем правому диву размер?

1. по задаче второй див должен занять оставшееся пространство.

2. если не задать есму размер, то он зависит от содержимого и при увеличении в нем содержимого будет выползать вниз.

[Softlink]

Я почему задавал свои вопросы.

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

Если высота не задана, то можно использовать вариант на table-cell или табличкой сделать, как писали выше. Задача до конца не ясна.

[psywalker]

  On 8/17/2011 at 6:45 PM, cheburek said:

  On 8/17/2011 at 6:40 PM, psywalker said:

А зачем правому диву размер?

1. по задаче второй див должен занять оставшееся пространство.

2. если не задать есму размер, то он зависит от содержимого и при увеличении в нем содержимого будет выползать вниз.

Не верю. Покажи пример. Вот код:

<DIV style="float:left; width: 200px;"><NOBR>Фраза</NOBR></DIV>
<DIV style="margin-left: 200px; ">6666666666666666666666666666666666667777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777666666666666666666666666666666текст</DIV>

[amelice]

  On 8/17/2011 at 6:47 PM, psywalker said:

Не верю. Покажи пример. Вот код:

<DIV style="float:left; width: 200px;"><NOBR>Фраза</NOBR></DIV>
<DIV style="margin-left: 200px; ">6666666666666666666666666666666666667777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777666666666666666666666666666666текст</DIV>

Я в твоем коде не обратила внимание на то, что отсутсвует float-left во втором диве. В этом случае я ошиблась.

Установку взяла как у автора было два дива с float:left.

[psywalker]

  On 8/17/2011 at 7:09 PM, cheburek said:

  On 8/17/2011 at 6:47 PM, psywalker said:

Не верю. Покажи пример. Вот код:

<DIV style="float:left; width: 200px;"><NOBR>Фраза</NOBR></DIV>
<DIV style="margin-left: 200px; ">6666666666666666666666666666666666667777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777666666666666666666666666666666текст</DIV>

Я в твоем коде не обратила внимание на то, что отсутсвует float-left во втором диве. В этом случае я ошиблась.

Установку взяла как у автора было два дива с float:left.

[Artlive]

  On 8/17/2011 at 5:12 PM, Softlink said:

Artlive, не совсем понятно. Если строка первого дива заполняет всю ширину, то второй должен исчезнуть или как? Что во втором диве? Если текст, то как он должен отображаться при изменении ширины(исчезать, переноситься)? Высота родителя и дивов, как я понимаю будет фиксирована и равна размеру шрифта+паддинги?

1. Строка первого дива ни при каких обстоятельствах все не займет. Так что второй див есть всегда

2. Второй див - текст. Он должен помещаться весь, переносясь на то количество строк, которое для этого потребуется

3. Высота (т.е. именно высота) дивов такая, какая им нужна, т.е. не фиксируется никак

[psywalker]

  On 8/17/2011 at 7:41 PM, Artlive said:

  On 8/17/2011 at 5:12 PM, Softlink said:

Artlive, не совсем понятно. Если строка первого дива заполняет всю ширину, то второй должен исчезнуть или как? Что во втором диве? Если текст, то как он должен отображаться при изменении ширины(исчезать, переноситься)? Высота родителя и дивов, как я понимаю будет фиксирована и равна размеру шрифта+паддинги?

1. Строка первого дива ни при каких обстоятельствах все не займет. Так что второй див есть всегда

2. Второй див - текст. Он должен помещаться весь, переносясь на то количество строк, которое для этого потребуется

3. Высота (т.е. именно высота) дивов такая, какая им нужна, т.е. не фиксируется никак

А наделай скриншотов с разными ситуациями, что должно быть и не должно.

[Artlive]

  On 8/17/2011 at 7:51 PM, psywalker said:

А наделай скриншотов с разными ситуациями, что должно быть и не должно.

Да, в общем, выглядит все просто

Ширина желтого зависит от слова внутри него

Ширина голубого — все оставшееся резиновое место. Внутри — текст, который никуда не должен вылезать, а сидеть внутри DIV'a, переносясь на то количество строк, которое потребуется.

На таблицах — проще простого. А вот с блоками — затык :-)

[psywalker]

  On 8/17/2011 at 8:20 PM, Artlive said:

  On 8/17/2011 at 7:51 PM, psywalker said:

А наделай скриншотов с разными ситуациями, что должно быть и не должно.

Да, в общем, выглядит все просто

Ширина желтого зависит от слова внутри него

Ширина голубого — все оставшееся резиновое место. Внутри — текст, который никуда не должен вылезать, а сидеть внутри DIV'a, переносясь на то количество строк, которое потребуется.

На таблицах — проще простого. А вот с блоками — затык :-)

Почему же затык? Ты вот это пробовал? http://forum.htmlbook.ru/index.php?showtopic=28788&view=findpost&p=217534