如何使div與頁面上的特定td保持一致？

Question

Please look here too see what I am looking at

The TD element I am trying to align with

如果你看看上面的圖片，你會看到彈出顯示框，如果有人不正確類型的電子郵件「助手的電子郵件：」字段。

我想將該div（包含錯誤文本）與該助理電子郵件輸入字段對齊，以便div的左側與輸入字段的左側對齊。但似乎無法弄清楚如何做到這一點。我在爲我創建這些字段的環境中工作，並將它們放置在格式表格中。每個標籤和字段都有自己的td，每行都在tr之內。

在這種情況下，我使用JavaScript這樣的：

$("#" + emailToValidate).parents('tr').after('<div id="a_email" class="email"></div>'); 

$("#a_email").css({ 
    "position":"relative", 
    "padding":"13px", 
    "margin":"15px 0 0.5em", 
    "width":"300px", 
    "color":"#D35400", 
    "background":"#D35400", 
    "-webkit-border-radius":"0px", 
    "-moz-border-radius":"0px", 
    "border-radius":"0px", 
    "vertical-align": "top" 
}); 

下面是部分的HTML：

<tr> 
<td valign="top" id="last_name_label" width="12.5%" scope="col"> 
Last Name: 
<span class="required">*</span> 
</td> 
<td valign="top" width="37.5%"> 
<input type="text" name="last_name" id="last_name" size="30" maxlength="100" value="Test" title=""> 
</td><td valign="top" id="assistant_email_c_label" width="12.5%" scope="col"> 
Assistant Email: 
</td> 
<td valign="top" width="37.5%"> 
<input type="text" name="assistant_email_c" id="assistant_email_c" size="30" maxlength="255" value="" title=""> 
</td></tr> 

中的div元件，它不是錶行本身內緊接在本文後面的代碼之後。

<div id="a_email" class="email" style="position: relative; padding: 13px; margin: 15px 0px 0.5em; width: 300px; color: rgb(211, 84, 0); border-radius: 0px; vertical-align: top; background: rgb(211, 84, 0);"> 
<h4 align="left"> 
<font color="white">Please format the email as such: <b>'youremail@emailprovider.com'</b>.<br>The save button will remain disabled <br>until corrections are made. 
</font> 
</h4> 
</div> 

我需要對齊此div而不更改頁面上的其他元素。我只是需要在javascript中添加一些東西到可以對齊它的CSS中。

Answer 1

這裏的工作撥弄該限制不觸及HTML結構和CSS和JS做到這一點：

See this working fiddle

CSS

#a_email { 
    display: none; 
    position :absolute !important; 
    left: 0; 
    top: 20px; 
    padding:13px; 
    margin:15px 0 0.5em; 
    width:300px; 
    color:#D35400; 
    background:#D35400; 
    -webkit-border-radius:0px; 
    -moz-border-radius:0px; 
    border-radius:0px; 
    vertical-align: top; 
} 

.wrap { position: relative; display: inline-block; } 

** ** JS

$(function(){ 
    $('#assistant_email_c').blur(function(){ 
    if(validateEmail($(this).val()) == false){ 
      $("#a_email").insertAfter($(this)).addClass('toWrap'); 
      $(this).addClass('toWrap'); 
     if($('.wrap').length == 0){ 
     $('.toWrap').wrapAll("<div class='wrap' />"); 
     } 
     $("#a_email").css('display','inline-block').fadeIn(300); 
    }else{ 
     $("#a_email").fadeOut(300); 
    } 
    }); 
}); 

function validateEmail(email) { 
    var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; 
    return re.test(email); 
}