Html 将两个div并排排列在一个字段集中

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

以下是HTML（这是一个MVC站点，所以我使用Razor）：

制作人信息
@LabelFor（model=>model.ReferenceNumber类型）
@LabelFor（model=>model.FormattedReferenceNumber）
@LabelFor（model=>model.ProducerType）*
@LabelFor（model=>model.EffectiveDate）*
@LabelFor（model=>model.JIT）
@CheckBoxFor（x=>x.JIT）
@LabelFor（model=>model.extreId）
@RadioButton（model=>model.ReferenceNumber类型，“S”）SSN
@RadioButtonOn（model=>model.ReferenceNumber类型，“E”）EIN
@如果（ViewBag.FullSSN）
{
@DisplayFor（model=>model.FormattedReferenceNumber）
}
其他的
{
@Html.Raw（“xxx xx-”@Html.DisplayFor（model=>model.displayLastFour）
}                     
@DropDownListFor（x=>x.ProducerType，（SelectList）ViewBag.ProducerChoices，新的{id=“drpProducerType”}）
@Html.TextBoxFor（model=>model.EffectiveDate，新的{maxlength=10}）
@Html.ValidationMessageFor（model=>model.EffectiveDate）
@LabelFor（model=>model.HoldBool）
@CheckBoxFor（x=>x.HoldBool）
@Html.TextBoxFor（model=>model.extreId，新的{maxlength=40}）

您需要指定浮动div的宽度，最好是50%

---

另一个解决方案是使用html表格或flex框

尝试设置Css

显示：内联块用于子div。还有一个问题是，您的
字段集的宽度
is
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>


制作人信息
....
....
....
....

永远不要使用表格进行布局。它们的问题是缺乏灵活性。在不需要灵活性的情况下，表的行为实际上非常可靠。实际上，表的呈现成本也更高。避免在布局中使用它们。布局的CSS！用于显示数据的表格！就布局而言，桌子是可怕的，更不用说古董了。使用CSS要比使用表格好得多。下面是要遵循的模式：
<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>