无法让 2 个浮动元素垂直对齐，它们与另一个元素之间有一个边距答案

【问题标题】：Unable to get 2 floated elements to vertically align, with a margin between them and another element无法让 2 个浮动元素垂直对齐，它们与另一个元素之间有一个边距
【发布时间】：2012-06-06 03:53:15
【问题描述】：

我在这里有一个 HTML 示例：http://jsfiddle.net/TzJmN/1/

我试图让输出出现，以便左侧的项目和左侧的“跟踪错误”标题以及右侧的文本垂直对齐，并且在顶部的水平条下方都有 12px .我无法做到这一点。左边的item坚持挤在左上角，右边的item坚持离单杠太远！

我有一种强烈的感觉，因为我正在使用浮点数，但我不知道如何解决这个问题。

有什么建议吗？

【问题讨论】：

您的问题有点难以理解，您希望元素与整个页面垂直对齐吗？或许可以提供您想要实现的外观图像。
对于浮动，框的顺序通常很重要。交换它们并从.risk-statistics-values 中删除clear:both; 会产生：jsfiddle.net/qeA7L - 不过仅在 Chrome 中进行了测试。这就是你所追求的吗？ :)（并且回复：12px，将margin-top 转换为padding-top 就足够了。）

标签： html css css-float vertical-alignment

【解决方案1】：

如何使用position:absolute; top:12px; bottom:0; left:0; width:100px 并为文本 div 提供与宽度相匹配的边距 + 您想要在它们之间的边距 margin-left:110px;。当您调整浏览器大小时，这种方式也可以很好地缩放。

看看这里：http://jsfiddle.net/TzJmN/3/

尝试调整浏览器窗口的大小。

编辑：做了一些小改动，使距离上边框 12 像素

【讨论】：

【解决方案2】：

添加 padding-top: 10px;到 .risk-statistic-container

编辑：

抱歉，试试这个：

http://jsfiddle.net/aFb3F/

你的花车被清除了

【讨论】：