asp.net - 显示验证消息时表格行向下移动，未对齐

Question

我的 JSFIDDLE 重现我遇到的问题: http://jsfiddle.net/YLQdy/

CSS

.datagrid table { 
    border-collapse: collapse; 
    text-align: left; 
    width: 100%; 
} 

.datagrid .table-one {
    float: left;
    width:50%;
}

.datagrid .table-two {
    float: right;
    width:50%;
}

我的登记表

<div>
        <fieldset>
            <legend>Registration</legend>

            <div class="datagrid">
                <!--LEFT SIDE -->
                <div>@Html.ValidationMessageFor(p => p.Email)</div>
                <table class="table-one">
                        <tr>
                            <!--Email--> 
                            <td>@Html.LabelFor(p=>p.Email)<span style="color: #dc143c">*</span></td>
                            <td>@Html.TextBoxFor(p=>p.Email, new {name = "txtEmail"})</td>
                        </tr>
                </table>

                <!--RIGHT SIDE-->
                <div>@Html.ValidationMessageFor(p => p.Password)</div>
                <table class="table-two">
                        <tr>
                            <!--Password-->
                            <td>@Html.LabelFor(p=>p.Password)<span style="color: #dc143c">*</span></td>
                            <td>@Html.PasswordFor(p=>p.Password, new {name = "txtPassword"})</td>
                        </tr>
                </table>
            </div>
         </fieldset>
   </div

验证前

验证后

这可能是什么问题？我的想法是 float: right; 是罪魁祸首，但我不熟悉另一种将表格并排放置的方法。关于可能导致这种转变的原因有什么想法吗？

Answer 1

因为div是 block 元素。

在你的例子中你有

<div>@Html.ValidationMessageFor(p => p.Email)</div>

它将占据容器的整个宽度。

要么在div上放一个width，比如

div.SomeClass{
   width: 50%;
   display: inline-block; // or use display to change how it is displayed
}

/* 编辑 */

将 div + table 的每个部分包装在一个单独的 div 中，分别向左和向右浮动。例如

<div class="left">
   //
</div>
<div class="right">
   //
</div>

然后对父容器使用 class="clearfix" 来清除 float 。

.clearfix:after {
    content:" ";
    /* Older browser do not support empty content */
    visibility: hidden;
    display: block;
    height: 0;
    clear: both;
}

UPDATED FIDDLE