在一个字段集合内并排放置两个div

我想将这两个div并排放置在一起，但无论我做了什么尝试，即使它在另一个页面上都有效，我会得到一个看起来像这样的结果：在一个字段集合内并排放置两个div

enter image description here

这里是HTML（这是一个MVC网站，所以我用剃刀）：

<fieldset id="AgentTypeFields" style="width: 400px;" > 
    <legend>Producer Info</legend> 
    <div id="BasicsContainer" style="clear:both;"> 
     <div id="BasicsLeft" style="float: left;"> 
      <div class="M-editor-label" > 
       @Html.LabelFor(model => model.ReferenceNumberType) 
      </div> 

      <div class="M-editor-label"> 
       @Html.LabelFor(model => model.FormattedReferenceNumber) 
      </div> 

      <div class="M-editor-label"> 
       @Html.LabelFor(model => model.ProducerType)<span class="req">*</span> 
      </div> 

      <div class="M-editor-label"> 
       @Html.LabelFor(model => model.EffectiveDate)<span class="req">*</span> 
      </div> 

      <div class="M-editor-label"> 
       @Html.LabelFor(model => model.JIT)&nbsp; 
       @Html.CheckBoxFor(x => x.JIT)       
      </div> 

      <span id="ExternalRepId"> 
       <div class="M-editor-label"> 
        @Html.LabelFor(model => model.ExtRepID) 
       </div> 
      </span>                        
     </div> 
     <div id="BasicsRight" style="float:right;"> 

      <div class="M-editor-field" style="margin-right: 120px;" > 
       @Html.RadioButtonFor(model => model.ReferenceNumberType, "S") SSN 
       @Html.RadioButtonFor(model => model.ReferenceNumberType, "E") EIN      
      </div>  

      <div class="M-editor-field" id="refNumber" style="margin-right:138px;"> 
       @if (ViewBag.FullSSN) 
       { 
        @Html.DisplayFor(model => model.FormattedReferenceNumber) 
       } 
       else 
       { 
        @Html.Raw("xxx-xx-")@Html.DisplayFor(model => model.displayLastFour) 
       }      
      </div> 

      <div class="M-editor-field" style="margin-right:82px;"> 
       @Html.DropDownListFor(x => x.ProducerType, (SelectList)ViewBag.ProducerChoices, new { id = "drpProducerType" }) 
      </div> 

      <div class="M-editor-field">   
       @Html.TextBoxFor(model => model.EffectiveDate, new { maxlength = 10 }) 
       @Html.ValidationMessageFor(model => model.EffectiveDate) 
      </div> 

      <div class="M-editor-field"> 
       @Html.LabelFor(model => model.HoldBool) 
       @Html.CheckBoxFor(x => x.HoldBool) 
      </div> 

      <span id="ExternalRepId"> 
       <div class="M-editor-field"> 
        @Html.TextBoxFor(model => model.ExtRepID, new { maxlength = 40 }) 
       </div>       
      </span>                        
     </div>      
    </div> 

</fieldset>

来源

2014-01-23 NealR

这是遵循的模式：http://alistapart.com/article/prettyaccessibleforms –

你需要指定宽度上的浮动的div，最好是50％。

另一种解决方案是使用HTML表格或柔性盒

来源

2014-01-23 19:59:20 Mabedan

不要使用表格布局。 –

他们的问题是缺乏灵活性。在你不需要灵活性的情况下，这个行为实际上非常稳定。 – Mabedan

表格在渲染方面实际上更昂贵。避免使用它们进行布局。用于布局的CSS！用于显示数据的表格！ –

尝试设置的CSS display: inline-block;儿童的div。还有一个问题是因为你的fieldset的宽度是400px两个divs都不能装在里面。尝试将它设置为100%

<fieldset id="AgentTypeFields" style="width: 100%;" > 
    <legend>Producer Info</legend> 
    <div id="BasicsContainer" style="clear:both;"> 
     <div id="BasicsLeft" style="display:inline-block;"> 
     .... 
     .... 
     </div> 
     <div id="BasicsRight" style="display:inline-block;"> 
     .... 
     .... 
     </div> 
    </div> 
</fieldset>

FIDDLE

来源

2014-01-24 05:46:04

在一个字段集合内并排放置两个div

回答

相关问题