CSS: Моделирование гибкой ширины (без минимальной ширины) -

Question

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

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