css - 跨越 div 和不同的字体大小对齐

Question

我在一个 div 中有 3 个 span。

<div class="align">
  <span class="a">Title</span>
  <span class="b">Someinfomation</span>
  <span class="c">Toright</span>
</div>

为了使 c 类垂直对齐，我必须使用 margin-top 来修复它然而，对于 IE7 看起来不同。这是在线示例:http://jsfiddle.net/wZmGQ/

是的，我希望 IE7 也能正常工作。如果有人可以帮助我提供更好的解决方案？谢谢

解决方法如下，求IE7解决方法

从float: right in IE7 dropping to a new line得到答案

Try to small change markup: place items with a float before items without it (from the same row). It should help.

Answer 1

每当您 float 一个元素时，您就是在隐式声明display:block。所以当你编写如下代码时:

.some-element {
    display: inline-block;
    float: right;
}

...与执行此操作完全相同:

.some-element {
    display: inline-block;
    display: block;
    float: right;
}

...但我知道这对您帮助不大。看看这个 fiddle ，抱歉，我目前无法在 IE7 中进行测试，但看看这是否有助于您朝着正确的方向前进:

http://jsfiddle.net/ryanwheale/wZmGQ/3/

本质上是这样的:

.align{
    border: 1px solid black;
    line-height: 35px; /* larger than your largest font size */
}
.a, .b, .c {
    vertical-align: middle;
}