css - CSS - 同一行中的两个浮动 div，一个带有换行文本

Question

这是问题所在：我想在同一行中有 2 个浮动 div。右 div 可以是固定宽度。左 div 应该占用所有剩余空间，并将文本包装在里面。父容器宽度是可变的，所以我不能在两个 div 上设置宽度。

http://jsfiddle.net/af6wP/

div{border: 1px solid black}
.left{float: left}
.right{float: right}
<div class="left">
    very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text 
</div>

<div class="right">
    short text
</div>

Answer 1

看起来你只需要一个浮点数：

div{border: 1px solid black}
.left{ overflow: hidden; }
.right{float: right}

示例http://jsfiddle.net/KmPjL/

Answer 2

编辑

为右侧 div 的固定宽度提供了更好的解决方案：

html

<div class="left">
    <div class="right">
        short text
    </div>
    very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text 

</div>

CSS

div{border: 1px solid black;}
.right{float:right;width:24%;}

查看更新的小提琴

如果右侧容器上有长文本，则必须使用clearfix。