CSS或JQuery使文本与旁边浮动的元素垂直对齐

debugcn 发表于 Dev

飞行L123

我有一个div浮动左侧，其中包含比其右侧内容大的文本，但是我希望右侧的文本与浮动div中的文本底部对齐。这是一个JS小提琴，显示了一个示例：

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

的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;
}

到目前为止，我能够完成此操作的唯一方法是通过执行此小提琴中的操作：

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

我只是将.fillCSS更改为：

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

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

塞瓦·阿尔汉格尔斯基（Seva Arkhangelskiy）

解决方法如下：

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/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。