css - 是否有一种 0 宽度的方法来防止 float div 折叠

Question

首先，这个问题不是关于 block 元素在其子元素 float 时折叠。事实上，这个问题与清算完全无关。

问题是这样的。假设我有一系列 float 的 div，例如:

<div class="column">Column 1</div>
<div class="column"></div>
<div class="column">Column 3</div>

使用 CSS:

div.column { float: left; width: 200px; }

在最新版本的 Firefox 和 Safari 中，中间栏将折叠，尽管显然不是 IE7。 我想要的是 IE7 的行为。

我意识到我可以添加一个   并且它将保持 div 打开，但在这种情况下这对我不起作用，因为我也有这样的声明:

div.column input { width: 100% }

我有一系列以类似表格的格式放置的列，在某些情况下会导致输入字段消失。问题是当输入消失时，字段会崩溃。如果我添加   它会导致 div 换行。只是为了避免最初的问题:

• 为什么我不用表格代替？因为我使用 Scriptaculous Sortable 来拖放行，这不适用于表格
• 为什么我不使用较短的像素宽度来为   留出空间？ 因为 width: 100% 更准确跨浏览器。
• 为什么我在隐藏输入时不添加   我可能最终会求助于此，但在 JS 中会有点难看，所以我希望有更好的方法。

这里有人有什么聪明的技巧吗？由于 Safari 和 Firefox 都以这种方式运行，因此我认为这是官方认可的行为。这在 W3C 规范中的何处进行了讨论？

Answer 1

嗯？你不应该给它一个随机的高度吗？你能展示一个演示吗？