jquery - CSS 或 JQuery 将文本与其旁边 float 的元素垂直对齐

Question

我有一个左侧 float 的 div，其中包含的文本尺寸大于右侧的内容，但我希望右侧的文本与 float div 中的文本底部对齐。这是一个 JS Fiddle 显示示例:

http://jsfiddle.net/cykz8vd0/3/

如您所见，右侧的文本与左侧的字母未对齐。我希望右侧文本第一行的底部与左侧字母的底部对齐。

HTML

<div class="floatLeft">
    A:
</div>
<div class="fill">
    Text goes here. I would like it to be aligned nicely with the letter on the left.
    <br>
    Another line of text here.
</div>

CSS

.floatLeft{
    float:left;
    width:20px;
    font-size:18px;
    font-weight:bold;
}

.fill{
   margin-left:25px;
}

到目前为止，我能够实现这一目标的唯一方法是按照您在这个 fiddle 中看到的操作:

http://jsfiddle.net/cykz8vd0/4/

我刚刚将 .fill css 更改为:

.fill{
   margin-left:25px;
   position:relative;
   top:3px;
}

但是 top:3px 并不总是有效，因为此代码将在具有不同字体的页面上实现。有什么方法可以让我以编程方式计算这个 top 值应该是什么，以便我可以使用 JQuery 设置它，或者是否有更好的方法来实现这种对齐？

Answer 1

解决方案如下:

HTML:

<div class="fill">
    <div class="floatLeft">A:</div>Text goes here. I would like it to be aligned nicely with the letter on the left.
    <br>
    Another line of text here.
</div>

CSS:

.floatLeft{
    display: inline-block;
    width: 20px;
    padding-right: 5px;
    margin-left: -25px;
    text-align: right;
    font-size: 18px;
    font-weight: bold;
}

.fill{
    font-size: 12px;
    margin-left:25px;
}

无论font-size是多少，您的标签现在都与文本基线完美对齐。 JSFiddle:http://jsfiddle.net/cykz8vd0/6/