css - 两列流体的 2 列 Div 布局

Question

我正在尝试实现与此处要求相反的结果:CSS columns: both fluid and flexible in width
我尝试使用那里的解决方案，但无法正常工作。

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

左边的列 div 包含一个 img 元素(虽然我不知道这是否相关)。右列 div 包含两个子 div，以 block 的形式堆叠。底部的那个有一个 div 表(虽然我不知道这是否相关)。在我看来，这确实与上面问题中发布的问题相同，但只是相反。

我曾尝试将左侧 div float 为“左”，将右侧 div float 为“右”，但我的右侧 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
}