如何阻止 ASP.NET div 样式重叠/渗透到周围的 div 中？

Question

当我将一个 div 设置为在 ASP.NET Webforms 中可见时（是的，我知道它很古老。我从事教育工作。），红色样式从下面的 div 重叠/渗透到上面的 div 中。这些 div 是完全独立的，所以我不知道为什么会发生这种情况。

以下是错误渲染的 div 的显示方式。这是引导模式的内部：

这是 .aspx 文件中的代码： 正如你所看到的，这两个 div 是完全分开的。我不知道它位于 UpdatePanel 内这一事实是否会影响它？

<asp:UpdatePanel ID="upModal" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
    <ContentTemplate>
        <div class="col-md-12" style="padding:10px 15px;">
            <p>Please check the box when the student answers a question correctly.</p>
            <p id="VerificationInstructions" runat="server"></p>
        </div>
        <div class="form-group alert alert-danger" id="InvalidDiv" style="margin:20px 0px 0px;" runat="server" visible="false">
            <asp:Label ID="InvalidLabel" CssClass="alert-link" runat="server" Text="" />
        </div>

以下是 div 在 Chrome 中的渲染方式：

<div class="col-md-12" style="padding:10px 15px;">
    <p>Please check the box when the student answers a question correctly.</p>
    <p id="ContentPlaceHolder1_VerificationInstructions">Once as student has answered 5 questions correctly, click "Finish Verification".</p>
</div>
<div id="ContentPlaceHolder1_InvalidDiv" class="form-group alert alert-danger" style="margin:20px 0px 0px;">
    <span id="ContentPlaceHolder1_InvalidLabel" class="alert-link">The student must answer at least 5 questions correctly for successful verification.</span>
</div>

据我所知，IvalidDiv 似乎出现在上部 div 的后面并与其重叠。我可以在两个 div 之间放置某种元素来快速轻松地修复吗？

提前谢谢您。

Answer 1

试试这个：

<div style="clear: both;"></div>

<div class="col-md-12" style="padding:10px 15px;">
<p>Please check the box when the student answers a question correctly.</p>
<p id="VerificationInstructions" runat="server"></p>
</div>

<div style="clear: both;"></div>

<div class="form-group alert alert-danger" id="InvalidDiv" style="margin:20px 0px 0px;" runat="server" visible="false">
<asp:Label ID="InvalidLabel" CssClass="alert-link" runat="server" Text="" />
</div>

<div style="clear: both;"></div>