表格行在显示验证消息时向下移动，未对齐

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是一个块元素。

在您的示例中，您有

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

将占据容器的整个宽度。

在width上添加div，例如

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"到父容器来清除浮动。

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

UPDATED FIDDLE