css - 打破跨度到换行符而不是交叉或插入右浮动 div？

Question

如何将跨度的文本(从可变的左侧位置开始)推送到换行符，以便它尊重一组固定的右浮动 div 的空间？

我需要确保带有文本“THIS ONE NEEDS TO BREAK...”的 span 换行而不是将其右侧的固定宽度 div 推到下一个排。由于这是在树内部，左边 的跨度是可变的，层次结构越深，总宽度越小。

该解决方案必须适用于 IE8。

HTML:

<li>
    <div>+</div>
    <div class="icon">
        <span class="nodetext">THIS ONE NEEDS TO BREAK BEFORE NEXT SPAN (Orange line)</span>
        <span class='tree'>
             <div>FIXED</div>
             <div>40px</div>
             <div>FOR</div>
             <div>THESE</div>
        </span>
    </div>
</li>

CSS:

.tree
{   
    position:relative;
    float:right;
}

.tree div
{
   float: left;
   width: 40px;
}

span.nodetext
{
    /* 
       How to respect the orange line boundary?
    */
}

一张图片是...

我还做了一个JSFiddle .这是不正确的行为:只有当右列(带有“Result”和“CSS”)足够宽时显示才正确。如果右边的列太小，那么结果就会一团糟。 ( fiddle 中的 CSS 也不是 100% 正确:由于边距/填充，橙色线没有固定 - 我添加它是为了让它更清楚什么是什么)

Answer 1

我不想这么说……但这在 table 上做会更好。除非你想用jQuery向下跳一个DIV，获取宽度，放在上面的span上面。或者您可以开始考虑将 DIV 设为列而不是行。