jquery - 动态创建一个 div 并将其底部与另一个组件的顶部对齐

Question

我正在制作一个验证框架类型的东西，当组件上出现错误时，我想显示一个文本框，当用户鼠标悬停时显示错误。所以我创建了一个方法来做到这一点。问题是我不能把它放在正确的位置。我希望我动态创建的最外层 div 的底部位于鼠标所在元素的顶部。

function onMouseOverHandler(event) {
        var validationContent = document.createElement("div");
        validationContent.setAttribute("class", "validationErrorContent");
        for(var i = 0; i < this.validationErrors.length; ++i) {
            if(i > 0) {
                $(validationContent).append("<br>");
            }
            $(validationContent).append(this.validationErrors[i].message);
        }

        var validationDiv = document.createElement("div");
        validationDiv.setAttribute("class", "validationErrorDiv");
        validationDiv.setAttribute("id", "validationErrorDiv");
        validationDiv.appendChild(validationContent);
        $(validationDiv).offset({ top: $(this).offset().top - $(this).height(), left: $(this).offset().left + $(this).width() - 5});
        document.body.appendChild(validationDiv);
    }

这不起作用，因为此时validationDiv 的高度始终为0。

如果有人需要，这里还有相关的 CSS：

 .validationErrorDiv {position: absolute; display: block;}
.validationErrorContent {position: relative; color: white; background: red; width: 150px;}

Answer 1

验证 DIV 将始终只有一行文本。所以你可以这样添加min-height：

.validationErrorContent {
    position: relative;
    color: white; background: red;
    width: 150px; min-height: 1em;
}