Question

我正在页面上动态插入DIV，这是简化示例：

HTML：

<div class="left-column">
    <p>
        <label>Company Name:</label>
        <input type="text" maxlength="255" id="BodyContentPlaceholder_LeftColumnContentPlaceHolder_CompanyNameTextBox" />

    </p>
    <p>
        <label>Phone:</label>
        <input type="text" maxlength="255" id="BodyContentPlaceholder_LeftColumnContentPlaceHolder_PhoneNumberTextBox" __id="105" />         
    </p>
</div>
<div class="right-column">
    <p>
        <label __id="109">Contact Name:</label>
        <input  type="text" maxlength="255" id="BodyContentPlaceholder_LeftColumnContentPlaceHolder_ContactNameTextBox" __id="110" /> 
    </p>
    <p>
        <label>Email:</label>
        <input type="text" maxlength="255" id="BodyContentPlaceholder_LeftColumnContentPlaceHolder_EmailTextBox"  />     </p>
</div>
<div style="clear:both;">
    <input type="submit" value="Submit Request" id="myButton" />
</div>

CSS：

.inputError {
    border: 1px solid #006;
    background: pink;
}
.divError {
    border: 1px solid black;
    background: red;

}
label {
    float:left;
    width:120px;
    text-align:right;
    margin-right:5px;
}
input[type="text"] {
    width: 150px;
}
.left-column, .right-column {
    float:left;
    position: relative;
}
.left-column p, .right-column p {
    padding-bottom: 10px;
}
.left-column {
    margin-right:5px;
}

JS：

$(document).ready(function() {

    $("#myButton").on("click", DoTrick);
});

function DoTrick()
{
    var $input = $("#BodyContentPlaceholder_LeftColumnContentPlaceHolder_CompanyNameTextBox");

    var $div = $("<div/>")
        .attr("id", "GGG")
        .addClass("divError")
        .text("This field has error");

    $div.insertAfter($input);

}

但理想情况下，每当我知道输入元素时，我都希望它能正常工作我想添加显示在右上角的DIV，这是应该“浮动”的验证消息

现在当我添加DIV时，它会打破布局并且不会到达我需要它的位置。

Answer 1

您只需按像素定位任何元素。我认为它应该是这样的：

p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}

Answer 2

your.divError是<div>，这意味着它具有display：block属性，因此它将位于一个新行上。

如果你把它设为<span>，它将与输入元素内联（或修改CSS类）

Answer 3

不确定我是否理解正确但您是否正在寻找类似的东西？ http://jsfiddle.net/5ZM25/1/

insertAfter可以更改为insertBefore，然后根据输入框的右上角将其定位到您希望的位置。

Answer 4

这可能是位置：绝对的情况。

请参阅http://jsfiddle.net/HNQMm/3/

添加一个类来包装字段（我使用.relative）并将其设置为'position：relative'。

然后您的错误框可能如下所示：

.divError {
border: 1px solid black;
background: red;
position: absolute;
top: 0;
left: 50px;

}

.divError的顶部和左侧值现在相对于外部相对div，因此您可以将它们精确地设置在您需要的位置。

将Div放在输入框的右上角

4 个答案: