CSS: имитация гибкой ширины (без минимальной ширины) -

Question

У меня есть контейнер DIV шириной 100%, содержащий x div. Последний ребенок DIV плавает направо, остальные плавают влево. Все дочерние DIV остаются в строке до тех пор, пока они вписываются в планку (все ориентированы влево, за исключением последнего div, который расположен отдельно справа). Если размер окна уменьшен, и детям не хватает места, они рушатся от своей горизонтальной ориентации (что мне не нужно). Чтобы это исправить, я знаю, что могу установить минимальную ширину контейнера DIV, проблема в том, что в контейнере есть переменное количество DIV переменной ширины. Я хотел бы смоделировать возможность установить минимальную ширину, где находится контейнер, где min-width = ширина всех дочерних элементов, но я не могу вычислить их, потому что они являются переменными (что имитирует гибкое пространство между правым div и остальными , но не позволяйте им становиться ближе, чем они должны быть разрешены (следовательно, разрушаются элементы div)).

Я знаю, что это немного неясно, поэтому вот картинка:

Спасибо!

Answer 1

Я ненавижу это говорить (или, скорее, толпа против стола будет ненавидеть это), но вы знаете, что это довольно легко?

Все верно: таблицы.

<style type="text/css">
#topbar { width: 100%; }
#topbar div { white-space: nowrap; overflow: hidden; }
#topright div { text-align: right; }
</style>
<table id="topbar">
<tr>
  <td><div>Item 1</div></td>
  <td><div>Item 2</div></td>
  <td><div>Item 3</div></td>
  <td><div>Item 4</div></td>
  <td><div>Item 1</div></td>
  <td id="topright"><div>Item Right</div></td>
</tr>
</table>

Внутренние элементы div важны, поскольку скрытое переполнение работает только для элементов блока, а ячейки таблицы не являются блочными элементами (это тип отображения «ячейка таблицы»).