CSS - 自动宽度浮动元素（可扩展浮动）

Question

我有两个并排的浮动列。用户可以隐藏/折叠该列之一。在这种情况下，我希望另一列扩展以适合整个容器。

这可以用 CSS 实现吗？

在简历中，是否可以使浮子扩展到其容器的大小？ 即使元素是浮动的，如果它有 width:auto 它也应该扩展。至少我认为它应该是这样的。

Answer 1

我认为接受的答案实际上不起作用。我只是在尝试同样的事情，这就是解决方案...

aside { 
    float: left;   /* or could also be float: right */
}
main {
    overflow: hidden;
    /* don't float this one */
}

只需确保将可折叠元素 first 放在 HTML 中即可。那么后面的元素就会用完剩余的空间。

尝试一下这里的代码： http://jsfiddle.net/simoneast/qPHgR/2/

Answer 2

设置溢出：自动； height:auto; 对于 floatet 元素
:)

Answer 3

如果您的左列具有隐式大小，例如 250px，而您的右列仅浮动且没有设置大小，那么当左列折叠时，它应该填充容器。代码如下：

#leftcol{
width:250px;
float:left;
clear:none;
}

#rightcol{
float:left;
overflow:hidden;
width:auto; /* This may or may not work */
}