由于验证消息，Div在验证失败时向左移动

Question

我有两个div：一个是登录表单（float:left），另一个是我的aspx页面中的注册表单（带float:right）。

我已将<asp:RequiredFieldValidator... />放在两个表单的<asp:TextBox.../>上。登录表单（在左侧）在验证时工作正常，但是注册表单（在右侧）向左移动，因为验证消息在验证失败时插入然后推送完成更多的是左。

阻止这种情况的解决方案是什么？

ASPX：

 <div class="row" style="min-height: 500px">
            <div class="col-md-3" style="margin-left: 70px; float: left">
                <h2 class="form-login-heading" style="font-weight: 400">Sign In Now</h2>
                <div class="login-wrap">
                    <asp:TextBox ID="txtUname" runat="server" CssClass="span3" placeholder="Email or Phone Number" />
                    <asp:RequiredFieldValidator ID="reqUsername" runat="server" ValidationGroup="ValidateLogin" ControlToValidate="txtUname" ForeColor="Red" ErrorMessage="Please Enter a Username!" Display="Dynamic" /><br />

                    <asp:TextBox ID="txtPass" runat="server" CssClass="span3" placeholder="Password" TextMode="password" />
                    <asp:RequiredFieldValidator ID="reqPass" runat="server" ValidationGroup="ValidateLogin" ControlToValidate="txtPass" ForeColor="Red" ErrorMessage="Please Enter a Password!" Display="Dynamic" /><br />

                    <button runat="server" id="btnLogin" class="btn btn-1 btn-1a" title="signin" validationgroup="ValidateLogin" style="margin-left: 50px" onserverclick="btnLogin_ServerClick">
                        <i class="icon-unlock"></i>SIGN IN
                    </button>
                    <br />
                    <asp:Label ID="lblErrorMessge" runat="server" CssClass="registration" Font-Bold="true" ForeColor="Red" />
                    <br />
                    <div class="registration">
                        Don't have an account yet?<br />
                        <a class="" href="Registration.aspx">Create an account
                        </a>
                    </div>
                </div>
            </div>

    <!-- Second Div -->

    <div class="col-md-3" style="margin-right: 170px; float: right">
                <h2 class="form-login-heading" style="font-weight: 400">Register!</h2>
                <div class="login-wrap">
                    <asp:TextBox ID="txtName" runat="server" CssClass="span3" placeholder="Name" />
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" ValidationGroup="ValidateReg" runat="server" ControlToValidate="txtName" ForeColor="Red" ErrorMessage="What will We call You?" Display="Dynamic" /><br />

                    <asp:TextBox ID="txtEmail" runat="server" CssClass="span3" placeholder="Email" />
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator2" ValidationGroup="ValidateReg" runat="server" ControlToValidate="txtEmail" ForeColor="Red" ErrorMessage="This will be used as your Username!" Display="Dynamic" /><br />

                    <asp:Button runat="server" ID="btnRegister" class="btn btn-1 btn-1a" ValidationGroup="ValidateReg" Text="SIGN UP" OnClick="btnRegister_Click" />
                    <br />
                </div>
            </div>

        </div>

我也尝试更改margin-left属性，但似乎没有任何效果。

注意：我还需要两个div之间一个漂亮的时尚垂直分隔线。对此也有任何想法，欢迎..！

我想要这样的事情：http://jsfiddle.net/lesson8/85dV6/show/

更新：我已添加此课程：

<div class="col-md-4" style="border-right: 1px solid red; height: 400px; width: 400px;">
            <div style="height: 30px; width: 30px; border: 1px solid red; border-radius: 50%; font-weight: bold; line-height: 28px; text-align: center; font-size: 12px; float: right; position: absolute; right: -16px; top: 40%; z-index: 1; background: #DFDFDF;">
                OR
            </div>
        </div>

输出是这样的：

Answer 1

你可以用你的注册表格试试这个css ......

float:right!important;  insted of float:right;

对于分隔符，您可以使用<hr>或坚持使用twitter bootstrap的分隔符类，并添加一些额外的CSS。

更新：您Want的分隔符