css - 两个 div 并排，一个 100% 宽度其他宽度取决于内容

Question

我想在不使用固定宽度的情况下并排放置两个 DIV 标签。第一个 div 扩展到它的内容，第二个 div 应该填充剩余空间。此外，该 div 不得位于另一个 div 之上，因为它们具有透明背景图像，因此如果它们相交则很明显。我尝试了所有我能想到的可能性，但找不到使用 DIV 标签的解决方案。

我可以使用 TABLE 来做到这一点，但是否可以使用 DIV 来做到这一点？或者这是 DIV 不能做的另一件事？

代码如下:

            #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> 

感谢回复!

Answer 1

参见: http://jsfiddle.net/kGpdM/

#left {
    background: #aaa;
    float: left
}
#right {
    background: cyan;
    overflow: hidden
}

这适用于所有现代浏览器和 IE7+。

左栏的宽度将与其中的内容一样宽。右栏将占用剩余空间。

这个答案背后的溢出:隐藏“技巧”是explained here .