Дисплей CSS3: table-cell & float?

У меня есть длинный контейнер div, установленный в display:table, и divs внутри него установлен на display:table-cell; vertical-align: middle.

Я действительно доволен результатами вертикального выравнивания, но:

  • Я не знаю ширины этих трех div,
  • Я хочу, чтобы один из них находился на самой правой стороне контейнера div (без пробелов, конечно),
  • float: right не работает с display: table-cell.

Вот пример (я хочу плавать золотые divs справа). Я не могу использовать JS. Мне нужно, чтобы он работал в IE7 + или IE8 +, если это невозможно для IE7. Любые подсказки/идеи?

http://jsfiddle.net/cZ7Th/2/

Ответы

Ответ 1

Я не знаю, работает ли это с IE7 или 8, но я сделал это, объединив width: 1px, width: auto и white-space: nowrap. Определите все ячейки в макете таблицы как ширину в один пиксель, но запретите обертывание; затем добавьте пустую простую ячейку до тех, которые вы хотите плавать вправо.

http://jsfiddle.net/wZ96P/

Кажется, по крайней мере работать с современными версиями Chrome, Opera, Firefox и IE.

Ответ 2

Для этого вертикального выравнивания не работает:

<div style="display: table-cell; vertical-align: middle; float: right">...</div>

Но для этого он работает для меня:

<div style="float: right">
  <div style="display: table-cell; vertical-align: middle">...</div>
</div>