Question

我有一个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/

我刚将.fill css更改为：

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

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

Answer 1

有一些解决方案。一种方法是在line-height上添加.fill。然而，这可能并不可取。

另一个，假设您确实知道font-size div的.floatLeft，将使用::before伪元素，如下所示：

.fill::before {
    content: "";
    font-size: 18px;
}

这假设font-size的{{1}}为.floatLeft。这是JSFiddle演示第二种方法。

或者，如果你想使用jQuery，你可以这样做：

18px

将不可见范围添加到var height = $('.fill').prev().css('font-size'); var attrs = {"font-size": height, "display": "inline-block", "text-indent": -9999}; $('.fill').prepend('<span>|</span>').find('span').first().css(attrs);并动态修改其CSS。

JSFiddle使用该方法。

Answer 2

以下是解决方案：

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/

Answer 3

这将调整您的所有.fill：

$(document).ready(function () {
    $(".fill").each(function () {
        $this = $(this);
        var $floatLeft = $this.prev(".floatLeft");
        var left = $floatLeft.offset().left + $floatLeft.width();
        var top = $floatLeft.offset().top + parseInt($floatLeft.css("font-size")) - parseInt($this.css("font-size"));

        $this.offset({
            left: left,
            top: top
        });
    });
});

DEMO：JSFiddle

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

3 个答案: