Html 两个 div 并排，一个 100% 宽度其他宽度取决于内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6809079/
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
two divs side by side, one 100% width others width depended on content
提问by blejzz
I want to place two DIV tags side by side without using fixed width. The first div expands to its content and the second div should fill the remaining space. Also the div must NOT sit on top of the other div, because they have a transparent background image so if they intersect it's noticeable. I tried all possibilities that i could think off but couldn't find a solution using DIV tags.
我想在不使用固定宽度的情况下并排放置两个 DIV 标签。第一个 div 扩展到其内容，第二个 div 应填充剩余空间。此外，div 不能位于另一个 div 的顶部，因为它们具有透明的背景图像，因此如果它们相交，则很明显。我尝试了我能想到的所有可能性，但找不到使用 DIV 标签的解决方案。
I can do this using a TABLE, but is it possible to do it using DIV's? Or is this one more thing DIV's can't do?
我可以使用 TABLE 来做到这一点，但是否可以使用 DIV 来做到这一点？或者这是 DIV 不能做的另一件事？
Here's the code:
这是代码：
#right{
background: green;
width: 100%;
}
#left {
margin-top: 5px; /* to test if they intersect*/
background: red;
}
#container {
width: 800px;
}
<div id="container">
<div id="left"> This div is as big as it's content</div>
<div id="right"> rest of space</div>
</div>
Thanks for the replies!
感谢您的回复！
回答by thirtydot
See:http://jsfiddle.net/kGpdM/
见：http : //jsfiddle.net/kGpdM/
#left {
background: #aaa;
float: left
}
#right {
background: cyan;
overflow: hidden
}
This works in all modern browsers and IE7+.
这适用于所有现代浏览器和 IE7+。
The left column will be exactly as wide as the content inside it. The right column will take the remaining space.
左列将与其中的内容完全一样宽。右列将占用剩余空间。
The overflow: hidden"trick" behind this answer is explained here.
此处解释overflow: hidden了此答案背后的“技巧” 。
