動態創建一個div並將它的底部與另一個組件的頂部對齊

我正在製作一個驗證框架類型的事物，並且當組件出現錯誤時，我想顯示一個文本框，當用戶鼠標懸停時顯示錯誤。所以我創建了一個可以做到這一點的方法。問題是我不能把它放在正確的位置。我想要動態創建的最外部div的底部只是我鼠標結束的元素的頂部。動態創建一個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;}

來源

2013-03-05 user1513171

驗證DIV總是有文字的單行。所以你可以這樣添加一個min-height：

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

來源

2013-03-05 02:49:42

它可能並不總是隻有一行文字。一次可能有多個驗證錯誤。我能夠通過在document.body.appendChild（validationDiv）行之後移動偏移行來解決問題。 – user1513171 2013-03-05 03:35:37

不是的我在說的是，至少它會有單線。所以，這個解決方案有時可能會起作用。無論如何，所以你已經修好了。 – 2013-03-05 04:52:25

動態創建一個div並將它的底部與另一個組件的頂部對齊

回答

相關問題