第二行div在一个fieldset中并排

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

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

另一种解决方案是使用html表格或弹性框

Answer 2

尝试为子div设置Css display: inline-block;。还有一个问题是，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>

{{1}}

FIDDLE