两个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 +.

左列将与其中的内容完全一样宽.右列将占用剩余空间.

这里解释overflow: hidden了这个答案背后的"诀窍" .