在一個字段集合內並排放置兩個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

回答

相關問題