CSS：模拟弹性宽度（不使用min-width）

Question

我有一个100%宽度的DIV容器，其中包含x个DIV。最后一个子DIV向右浮动，其余的向左浮动。只要它们适合该栏（所有方向都是向左的，除了最后一个div单独靠在右边），所有子DIV仍然保持在一条线上。如果调整窗口大小使得孩子们没有足够的空间，它们就会从水平方向折叠（这不是我想要的）。为了解决这个问题，我知道可以设置DIV容器的最小宽度，但问题是容器中DIV的数量和宽度是可变的。我想模拟设置一个min-width，在这个容器中，min-width等于所有子元素的宽度，但我无法计算它们，因为它们是可变的（这将模拟右侧div和其他div之间的灵活空间，但不允许它们靠得太近而导致div折叠）。

我知道这有点不清楚，所以这里有一张图片： 谢谢！

- Nic

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很重要，因为溢出隐藏只对块元素有效，而表格单元格不是块元素（它们是“table-cell”显示类型）。

- cletus

---

就像你所说的。在我看来，真正致命的是当左对齐的 div 没有足够的空间时不应该换行的要求。表格是实现这种效果的唯一实用方式。 - ddaa

你可以使用 JavaScript 来调整最后一个 div 的大小吗？ - Glavić

表格有它们的用处。但是初学者会过度使用它们。 - Andrew Larsson

你为什么建议使用 nowrap 和 overflow: hidden？ - Robert Siemer