使用CSS强制浮动元素缩小

Question

如何在不使用表格而不使用.b包装的情况下强制.b缩小以适合.a旁边？ .a应该始终显示完整。

的CSS：

div{
    width:150px;
    border:1px solid #000;
    overflow:hidden;
}
.a{
    float:right
}

.b{
    float:left;
    overflow:hidden;
    white-space:nowrap;
}

HTML：

<div><span class='a'>a - text</span><span class='b'>b - some really long text and stuff</span></div>

jsfiddle：http://jsfiddle.net/jcubed111/U56cq/

Answer 1

http://jsfiddle.net/U56cq/16/

将float:left替换为display:block，您就可以获得所需内容。重点是：正常流程中阻塞，overflow:hidden旁边的float会严重缩小，以适应浮动块附近的空间。