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]

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

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

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

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

[amelice]

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

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

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

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

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

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

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

[psywalker]

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

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

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

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

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

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

[amelice]

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

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

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

[Softlink]

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

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

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

[psywalker]

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

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

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

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

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

[amelice]

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

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

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

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

[psywalker]

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

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

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

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

[Artlive]

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

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

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

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

[psywalker]

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

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

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

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

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

[Artlive]

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

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

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

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

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

[psywalker]

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

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

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

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

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

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