我没有更好的词来描述我的问题，这使我无法正确研究问题。但是，我可以描述它。
以下是我目前的结果。有问题的元素将驻留在一个表格单元格中，在一个包含大量数据的表格中。蓝色的元素是我想要水平移动的 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> </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 中完成的，因此作为最后的手段，可以手动确定要使用哪一行而不是让浏览器决定。
现在有两个问题:
- 您如何用几句话描述我的问题，以便我进一步调查？
- 这可以使用 css 吗？
提前谢谢你。
最佳答案
仅使用 css 是不可能的。你需要js。我推荐 jQuery http://jquery.com/ 您需要跟踪元素的位置 http://api.jquery.com/position/然后检查下一个元素的位置是否导致覆盖。
就 css 而言，有多种方法...如果您只想要一组 div，请尝试使用 position: absolute;在每一个上并使用顶部和左侧而不是边距( parent 必须有position:relative)。
您也可以尝试将每一行包装在一个单独的 div 中，但您可能不这样做就可以逃脱。
在单独的注释中——如果元素的 margin-left(或在我的场景中为 left)大于总宽度 - 元素宽度，你的元素会发生什么？位于 95% 的元素看起来如何？
关于css - 颠簸 float block 向上或向下一行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6968402/