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

【问题标题】：CSS - Two floating divs in same line, one with wrapping textCSS - 同一行中的两个浮动 div，一个带有换行文本
【发布时间】：2013-02-15 19:18:18
【问题描述】：

问题来了：我想在同一行中有 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>

【问题讨论】：

标签： css css-float

【解决方案1】：

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

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

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

【讨论】：

这是一个有效的解决方案，不需要父元素的特殊样式。只有左右浮动div。将右浮动元素作为第一个添加到 HTML DOM 中，将带有很长文本的主左元素作为第二个添加是很重要的。我commented on the original fiddle.

【解决方案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%;}

See updated fiddle

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

【讨论】：