颠簸浮动阻塞一条线向上或向下

Question

我缺乏更好的词语来描述我的问题，这使我无法正确研究问题。但是，我可以形容它。

到目前为止，我的结果如下。有问题的元素将驻留在表格单元格中，包含大量数据的表格中。蓝色的项目是我想要水平移动的div元素，因此它们的左边框显示元素的“值”。在下面的示例中，相对于整个单元格宽度，值显示在括号中。元素的宽度是流动的，因为元素将包含不同长度的文本。

（见http://i.stack.imgur.com/11Iy7.png上的图片）

这是通过以下代码获得的：

td.singleton {display: table-cell; }
td.singleton > div {display: inline-block; background-color: blue; clear: both; float:left}

<tr class="level2"><td>&nbsp;</td><td colspan="7" class="singleton">
        <div style="margin-left: 12%">Item 1 (.12)</div>
        <div style="margin-left: 23%">Item 2 (.23)</div>
        <div style="margin-left: 40%">Item 3 (.40)</div>
        <div style="margin-left: 80%">Item 4 (.80)</div>
</td><td></td><td></td></tr>

目前，上述工作正常，数据可读。但是，我希望将四条“线”压缩为两条，如下所示：

（见http://i.stack.imgur.com/l9Pyv.png上的图片）

这里，元素在最上面的线上绘制，只要它们不位于前一个元素的顶部;在这种情况下，元素被“撞到”一条线。 html的生成是在Python中完成的，所以作为最后的手段，可以确定手动使用哪一行而不是让浏览器决定。

现在有一个双重问题：

1. 你只用几句话描述我的问题，我可以进一步调查吗？
2. 这可以使用css吗？

提前谢谢。

Answer 1

我认为你不能在CSS中实现这一点。你最好在python中做那种情报......

再次阅读你的问题并玩你提供的代码（并使字体颜色变为白色;）），我发现，你可能有机会玩位置。第一步可能是让div绝对定位......

Answer 2

仅限css不可用。你需要js。我推荐jQuery http://jquery.com/ 您需要跟踪元素http://api.jquery.com/position/的位置，然后检查下一个元素的位置是否导致叠加。

就css而言，有很多方法......如果你只想要一组div来尝试使用position：absolute;在每一个上使用top和left而不是margins（parent必须有position：relative）。

你也可以尝试将每一行包裹在一个单独的div中，但你可以在不这样做的情况下逃脱。

在单独的注释中 - 如果元素的左边距（或我的场景中的左边）超过总宽度 - 元素宽度，你的元素会发生什么？对于位于95％的元素，它看起来如何？