css - 带有 float div的自动宽度

Question

我有两列都向左浮动的问题。 当我在右栏中添加过多内容时，它会位于左栏下方。

我的目标是右边的列使用所有可用的宽度，但如果内容太多，则不要放在第一列下面。

我已经尝试用 table-cell 解决我的问题，但我的左列有精确的高度，所以这似乎不可能。

http://jsfiddle.net/#run&togetherjs=NGo7m4749M (抱歉，我们现在不能用 jsfiddle 保存)

CSS:

#contener {
    width : 800px;
    background-color : yellow;
    height : 500px;
}

#left {
    float : left;
    width : 100px;
    background-color : blue;
    height : 150px; 
}

#right {
    float :left;
   // If i let width : auto, this column goes under the other... :(
   width : 500px;
}

HTML

<div id="contener">
    <div id="left">Hello</div>
    <div id="right">Eminuit autem inter humilia supergressa iam impotentia fines mediocrium delictorum nefanda Clematii cuiusdam Alexandrini nobilis mors repentina; cuius socrus cum misceri sibi generum, flagrans eius amore, non impetraret, ut ferebatur, per palatii pseudothyrum introducta, oblato pretioso reginae monili id adsecuta est, ut ad Honoratum tum comitem orientis for.</div>
</div>

谢谢

Answer 1

你可以只 float 第一个 div，让另一个放在一边并填充所有可用的空间 :) http://jsfiddle.net/GCyrillus/p63fj61a/

#right {
    overflow:hidden;/* trigger layout to see floatting elements */
    min-width : 500px;/* min-width should be set on parent, not here actually */
}