html - 在字段集中并排放置两个 div

Question

我试图将这两个 div 并排放置，但无论我做了什么尝试，即使它在另一个页面上工作，我得到的结果如下所示:

这是 HTML(这是一个 MVC 站点，所以我使用的是 Razor):

<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>

Answer 1

您需要指定 float div 的宽度，最好是 50%。

另一种解决方案是使用 html 表格或 flexbox