CSS - 同一行中的两个 float div,一个带有换行文本

标签 css css-float

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

最佳答案

看起来你在这里只需要一个 float :

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

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

关于CSS - 同一行中的两个 float div,一个带有换行文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14893257/

相关文章:

javascript - 禁用 JavaScript 或 Jquery 全屏覆盖事件

html - CSS float 清除问题

css - IE7 float 新行

css - 不一致的 CSS 行为 : 'display' and 'float' -- need advice

CSS 大多数带有百分比值的参数。好的做法?

html - CSS 混淆 100%。需要三个方 block 相互粘连

css - &lt;input&gt; 不继承 <body> 的字体

html - CSS - 1. 标题不缩放 2. float 文本不在同一基线上

html - 如何使左浮和右浮在同一行上?

javascript - 使用css或js关闭时如何将bootstrap 4模态对话框向右滑动