CSS - 自动宽度浮动元素（可扩展浮动）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3457288/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS - auto width floated element (expandable float)
提问by brpaz
I have two floated collumns side by side. The user can hide/collapse one of that collumns. In that case I want the other collumn to expand to fit the entire container.
我有两个并排浮动的柱子。用户可以隐藏/折叠该列之一。在这种情况下，我希望另一列扩展以适合整个容器。
Is this possible with CSS?
这可以用 CSS 实现吗？
In resume, it's possible to make a float to expand to the size of it's container? Even if the element is floated, if it has width:auto it should expand. At least that′s way I think it should work.
在简历中，是否可以制作浮动以扩展到其容器的大小？即使元素是浮动的，如果它有 width:auto 也应该展开。至少这是我认为它应该起作用的方式。
采纳答案by SimonDowdles
If your left column has an implicit size, say 250px and your right column is ONLY floated with no set size, then it should fill the container when the left column is collapsed. Code would be as follows:
如果您的左列具有隐式大小，例如 250 像素，而您的右列仅浮动而没有设置大小，那么当左列折叠时，它应该填充容器。代码如下：
#leftcol{
width:250px;
float:left;
clear:none;
}
#rightcol{
float:left;
overflow:hidden;
width:auto; /* This may or may not work */
}
回答by Simon East
Nup, I don't think the accepted answer actually works. I was just attempting the same thing, and this is the solution...
Nup，我不认为接受的答案实际上有效。我只是在尝试同样的事情，这就是解决方案......
.left {
float: left;
}
.right {
overflow: hidden;
/* don't float this one */
}
Play around with the code here: http://jsfiddle.net/simoneast/qPHgR/2/
回答by FARHAD AFSAR
set overflow:auto; height:auto;for floatet element
:)
overflow:auto; height:auto;为 floatet 元素设置:)
