2列Div布局，两列均为流体

Question

我试图实现与此处所要求的相反：CSS columns: both fluid and flexible in width
我尝试使用那里的解决方案，但我无法让它工作。

我有一个div容器。这个容器应该以2列方式并排放置2个div，我想填充容器的宽度。宽度不是预先知道的。但是，就分配宽度而言，左侧div优先于右侧div。然后右边的div可以有剩余的宽度。

左列div包含一个img元素（虽然我不知道这是否相关）。右列div包含两个子div，以块方式堆叠。底部的那个持有一个div-table（虽然我再也不知道这是否相关）。在我看来，它与上述问题中发布的问题完全相同，但只是相反。

我试图将左侧div“左”浮动，右侧div“右”浮动，但我的右侧div总是突破到一条新线，出现在左侧div之下。右侧div中没有​​任何内容可以将整个内容推到一个新行（如100％宽度的子元素）。

任何人都可以帮助我吗？

Answer 1

只需将float设置为left即可从原始示例中获得所需内容。

http://jsfiddle.net/vpADP/45/

HTML：

<div id="buttonDiv">button div as wide as text</div>
<div id="rightDiv">
    left div<br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris luctus  rutrum mi ut vehicula. Praesent vitae quam ut metus sollicitudin dapibus  ac in lectus. Praesent sit amet justo vitae leo venenatis ornare id at  felis. Etiam vel magna velit, a lacinia orci. Pellentesque lectus nibh,  mollis tempus bibendum venenatis, molestie ut nibh. Aliquam faucibus  aliquam eros, sit amet dignissim libero vestibulum vitae. Mauris nec  odio mauris, in sollicitudin ante. Vestibulum ut quam ac quam suscipit  luctus. In vitae enim orci. Ut consectetur consectetur lacus. 
</div>

CSS：

#rightDiv {
    background: #ccc;
    overflow: hidden
}
#buttonDiv {
    background: #f0f;
    float: left
}