Переход с табличной вёрстки на вёрстку слоями

[mymedia]

Добрый день, друзья!
Я даже не знаю как сформулировать свою проблему. Нужно код ниже сверстать слоями.

<table width="950px"><tr><td><nobr>Очень длинный текст</nobr></td><td><nobr>Ещё один очень длинный текст</nobr></td><td width="100%">Резиновый блок</td></tr></table>

Ни какие размеры блоков заранее неизвестны, кроме ширины макета.
display: table не предлагать.
Т.е. что я имею ввиду: есть блоки, которые должны быть размещены по горизонтали, при этом последний из них должен занять всё оставшееся место. Количество блоков неизвестно, но их явно не меньше двух.

[Aleksandr.L]

Ни какие размеры блоков заранее неизвестны, кроме ширины макета.

Т.е. что я имею ввиду: есть блоки, которые должны быть размещены по горизонтали, при этом последний из них должен занять всё оставшееся место. Количество блоков неизвестно, но их явно не меньше двух.

 

Получается, что все блоки резиновые?

[npofopr]

Почему всем так таблицы то не нравятся?

Можете flex попробовать.

[mymedia]

Получается, что все блоки резиновые?

Ну, как сказать резиновые... Вот в том коде, который я привёл, там резиновые блоки?

Текст в левых блоках переносится, только в тех местах, где это явно указано. Аналогично применению стиля white-space: nowrap. А вот текст в правом блоке должен переноситься при достижении правой границы макета.

Почему всем так таблицы то не нравятся?

Говорят, что это плохо и не посовременному. Хотя да, для меня у таблиц один минус - невозможность адаптивного дизайна

Можете flex попробовать.

А что такое flex?

 

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

Edited August 19, 2014 by mymedia

[klierik]

display: table не предлагать.

 

значит оставь как есть -- это лучшее решение данной задачи.

[mymedia]

значит оставь как есть -- это лучшее решение данной задачи.

Ладно, подумаю ещё над этим... Ну, или может в самом деле придётся насиловать div'ы, перекраивая их display: table и подобными.

 

Эх, казалось бы я уже нашёл решение проблемы... Ан нет!

<!-- цвета для наглядности --><div class="m" style="background:silver">    <div class="f" style="background:aqua">layer<br>new string<br>second string</div>    <div class="f" style="background:orange">more layer</div>    <div class="r" style="background:yellow">resizing block<br>test!test!test!</div></div>

.m { width: 950px; }.m > .f { float: left; }.m > .r { display: inline-block; }

Самый правый блок в таком случае перерносится вниз, если в нём текст не помещается в пространство между средним блоком и правым краем контейнера. Да, и к тому же жёлтый блок не растягивается до самой правой границы контейнера, если в нём мало текста

[Vicos]

Как вариант на js колдовать.

Ну или flexbox опробовать)

А что такое flex?

http://frontender.info/a-guide-to-flexbox/

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

[mymedia]

Ну или flexbox опробовать)

http://frontender.in...ide-to-flexbox/

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

Спасибо за ссылку, а то на htmlbook.ru этого нету . Обязательно попробую.

Edited August 19, 2014 by mymedia

[klierik]

есть еще один финт но он не лишен недостатков

http://jsfiddle.net/ygmem8Le/