Question

我们的一个表单有两个列大致如下所示（编辑了许多输入字段，因为它是一个相当大的表单）。用户需要能够从左列顶部一直到底部，然后再返回到右侧列的顶部，再次向下到底部。

我使用两个divs设置表单，每列一个（左/右）。然而，这样做的结果就是像现在这样把场地组扔出去了：

enter image description here

请注意，用户必须能够在每列中从上到下制表，我如何调整CSS /常规设置，以便fieldsets对齐。

例如，this fiddle Producer Info和Address Info已正确对齐，但我希望Basic Info与Territory Info水平对齐。

HTML

<div id="BigDiv" style="clear:both;display:inline;"> 
    <div id="LeftDiv" style="width:450px;float:left;">
        <fieldset style="width: 400px;" >
            <legend>Produer Info</legend>
            <div class="M-editor-label">
                Producer Type
            </div>
            <div class="M-editor-field">
                <input type="text"/>
            </div>
        </fieldset>
        <fieldset style="width: 400px;" >
            <legend>Basic Info</legend>
            <div class="M-editor-label">
                First Name
            </div>
            <div class="M-editor-field">
                <input type="text"/>
            </div>
            <div class="M-editor-label">
                 LastName
            </div>
            <div class="M-editor-field">
                <input type="text"/>
            </div>            
        </fieldset>        
    </div> 
    <div id="RightDiv" style="width: 450px; float:right">
          <fieldset style="width: 400px;" >
            <legend>Address Info</legend>
            <div class="M-editor-label">
                Home
            </div>
            <div class="M-editor-field">
                <input type="text"/>
            </div>
            <div class="M-editor-label">
                 Business
            </div>
            <div class="M-editor-field">
                <input type="text"/>
            </div>            
        </fieldset>        
         <fieldset style="width: 400px;" >
            <legend>Territory Info</legend>
            <div class="M-editor-label">
                Territory Type
            </div>
            <div class="M-editor-field">
                <input type="text"/>
            </div>
        </fieldset>        
    </div>
</div>

CSS

.M-editor-label 
{
    clear: both;
}

.M-editor-label 
{
    float: left;
    margin: 1em 0 0 0;
}

.M-editor-field 
{
    float: right;
    margin: 0.5em 0 0 0;
    color: Black;    
}
.M-editor-field-xtraspace
{
    float: right;
    margin:  0.5em 0 20 0;
    color: Black;    
}

Answer 1

由于基本信息和区域信息位于两个不同的div内，因此它们的对齐方式不能相互依赖。它们的对齐仅受其兄弟的影响，如基本信息的生产者信息和区域信息的地址信息。

因此，您需要手动为“基本信息”提供margin-top，以使其与Territory信息的顶部匹配处于适当的高度。

这是它的小提琴：http://jsfiddle.net/mb2x8e68/

<div id="BigDiv" style="clear:both;display:inline;"> 
<div id="LeftDiv" style="width:450px;float:left;">
    <fieldset style="width: 400px;" >
        <legend>Produer Info</legend>
        <div class="M-editor-label">
            Producer Type
        </div>
        <div class="M-editor-field">
            <input type="text"/>
        </div>
    </fieldset>
    <fieldset style="margin-top:35px;width: 400px;" >
        <legend>Basic Info</legend>
        <div class="M-editor-label">
            First Name
        </div>
        <div class="M-editor-field">
            <input type="text"/>
        </div>
        <div class="M-editor-label">
             LastName
        </div>
        <div class="M-editor-field">
            <input type="text"/>
        </div>            
    </fieldset>        
</div> 
<div id="RightDiv" style="width: 450px; float:right">
      <fieldset style="width: 400px;" >
        <legend>Address Info</legend>
        <div class="M-editor-label">
            Home
        </div>
        <div class="M-editor-field">
            <input type="text"/>
        </div>
        <div class="M-editor-label">
             Business
        </div>
        <div class="M-editor-field">
            <input type="text"/>
        </div>            
    </fieldset>        
     <fieldset style="width: 400px;" >
        <legend>Territory Info</legend>
        <div class="M-editor-label">
            Territory Type
        </div>
        <div class="M-editor-field">
            <input type="text"/>
        </div>
    </fieldset>        
</div>

Answer 2

我不相信你可以在没有为元素设置固定高度的情况下达到你想要的效果。将以下内容添加到CSS将确保所有字段集都正确对齐。请记住，您必须考虑最大尺寸的盒子。

 fieldset{ height:100px;}

在单独的列中水平对齐div

2 个答案: