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

Question

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

这是否可以使用CSS实现？

总之，是否可以使浮动元素扩展到其容器的大小？ 即使元素被浮动，如果它具有“width：auto”，它也应该扩展。至少我认为应该这样工作。

- brpaz

---

你能给我们提供一段代码示例，展示如何隐藏/折叠列吗？ - Sotiris

纯CSS实现列对用户事件的响应似乎不太可能，但使用js/jQuery肯定是可行的。 - David Thomas

你有没有考虑使用像jQuery这样的JavaScript库？它可以轻松地改变那些列的CSS样式，而不会出现任何问题。[编辑...注意到刷新页面后添加了其他类似的评论 - 哦好吧，伟大的思想... ;p] - Anthony Walsh

@brpaz - 有没有可能把这个问题的被采纳答案改一下？（只有你可以这样做。） - Simon East

Answer 1

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

.left { 
    float: left;
}
.right {
    overflow: hidden;
    /* don't float this one */
}

在这里玩弄代码：http://jsfiddle.net/simoneast/qPHgR/2/

- Simon East

---

这是一个大部分情况下不错的解决方法。但我不喜欢的是".right"容器溢出，导致滚动条出现在容器而不是窗口上。这真是令人遗憾。 - Joseph Daigle

抱歉Joseph，但overflow: hidden不应该在元素上显示滚动条。它会自动扩展宽度和高度，因此应该显示所有内容，除非它比列本身更大（例如图像或固定大小的元素）。您确定没有添加额外的CSS吗？ - Simon East

Simon，你是对的。如果.right或者.right内部的任何内容想要至少有一定的宽度，那么overflow: hidden会在窗口太小的情况下截断内容。在我的测试中，我添加了overflow-x: auto;，这会在这种情况下出现滚动条。 - Joseph Daigle

我无法理解这个！为什么它能工作？ - Protector one

@Protectorone 是的，这有点令人困惑。如果没有 overflow:hidden，.right 中的内容将会围绕在 .left 的周围和下方。但是似乎 overflow:hidden 有一些特殊的属性，它可以扩展一个框来容纳其中所有浮动元素，并调整一个框的大小以适应其他浮动元素。我不太确定原因 - 技术原因可能埋藏在 CSS 规范中某个地方，因为所有现代浏览器似乎都有这种行为。 - Simon East

Answer 2

对于浮动元素，可以设置 overflow:auto; height:auto;

- FARHAD AFSAR

Answer 3

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

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

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

- SimonDowdles

---

我必须投反对票，因为它不起作用。看这个例子：http://jsfiddle.net/4jtnY/2/ - Joseph Daigle