如何将跨度的文本(从可变的左侧位置开始)推送到换行符,以便它尊重一组固定的右浮动 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% 正确:由于边距/填充,橙色线没有固定 - 我添加它是为了让它更清楚什么是什么)
最佳答案
我不想这么说……但这在 table 上做会更好。除非你想用jQuery向下跳一个DIV,获取宽度,放在上面的span上面。或者您可以开始考虑将 DIV 设为列而不是行。
关于css - 打破跨度到换行符而不是交叉或插入右浮动 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16397836/