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

Question

这是问题： 我想要在同一行上有两个浮动的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>

- karolkpl

Answer 1

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

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

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

- Chris Danek

---

这是一种有效的解决方案，不需要对父元素进行特殊样式处理。只需左右浮动的div即可。重要的是将右浮动元素添加为HTML DOM中的第一个元素，而具有非常长文本的主要左侧元素则作为第二个元素。我在原始的fiddle上发表了评论（http://jsfiddle.net/prantlf/Tmd7u/）。 - Ferdinand Prantl

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%;}

查看更新的fiddle

在右侧容器中有一段长文本时，您需要使用clearfix。

- soyuka