获取包含不同字体大小的文本的多个div的方法都对齐到底部？

Question

HTML

<div id="container">
    <div style="left: 10px; bottom: 50px; font-size: 100px;" objectid="1" class="textObj" id="textObj-1">
        APPLE
    </div>
    <div style="left: 360px; bottom: 50px; font-size: 25px;" objectid="1" class="textObj" id="textObj-1">
        GRAPE
    </div>
</div>

CSS

#container {
    border: 1px solid green;
    top: 0;
    height: 500px;
    left: 0;
    position: absolute;
    width: 500px;
}
.textObj {
    position:absolute;
    outline: 1px solid red;
    display: block;
}

See JSFiddle

这些.textObj div由我的用户创建，可以有不同的字体大小。我需要将文本对齐到它自己的.textObj div的最底部。 APPLE这个词应该触及它自己的底部红色边框，GRAPE这个词应该是这样。

以下是实际应用的示例。

您可以看到所有.textObj div都位于其上有水平线的图像上方。这是我用于测试的内容。在一个完美的世界中，.textObj div中的实际数字将位于水平黑线上，而红色轮廓则保持在原来的位置。

以下是我想要的结果示例。

非常感谢任何帮助。

Answer 1

如果您希望文本的基线位于块的底部，请从.textObj类中删除字体高度的十分之一。 0.9em是基于块的font-size执行此操作的度量。

如果您希望它们全部位于容器的基线上，请将bottom属性更改为0。

这是你的小提琴，但显示了变化。

https://jsfiddle.net/hLeLc8ng/4/

并作为一个片段

＆＃13;

＆＃13;

#container {
    border: 1px solid green;
    top: 0;
    height: 500px;
    left: 0;
    position: absolute;
    width: 500px;
}

.textObj {
    position:absolute;
    outline: 1px solid red;
    display: block;
    bottom: 0;
    height: 0.9em;
}

＆＃13;

<div id="container">
    <div style="left: 10px; font-size: 100px;" objectid="1" class="textObj" id="textObj-1">
        APPLE
    </div>
    <div style="left: 360px; font-size: 25px;" objectid="1" class="textObj" id="textObj-1">
        GRAPE
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;