html - 如何将两个 div 并排对齐？

Question

我有两个字段集，我想将它们并排显示:

我已经设法让它彼此之间的距离达到我想要的正确距离，但无法排列到那里的高度。

下面是我用过的html。

<div style="width:900px; height:230px;">
  <fieldset style="width:150px;">
    <legend>Facilities Required</legend>
    <asp:CheckBox ID="PhysicalMailbox" runat="server" Text="Physical Mailbox" /><br>
    <asp:CheckBox ID="Uniform" runat="server" Text="Uniform"/><br>
    <asp:CheckBox ID="Desk" runat="server" Text="Desk"/><br>
    <asp:CheckBox ID="Stationary" runat="server" Text="Stationary"/>
  </fieldset>
  <div style="width:50%; top:0px">
    <fieldset style="width:229px; left:151px; float:right; top:0px;" >
      <legend>Access Required</legend>
      <asp:CheckBox ID="AccessTag" runat="server" Text="Access Tag" /><br><br>
      <asp:Label ID="lblProfile" enableviewstate="false" runat="server" AssociatedControlID="ddProfile" CssClass="FormLabel">Profile</asp:Label>
      <ICCM:ICCMDropDownList ID="ddProfile" runat="server" TabIndex="10" style="width:233px;" AppendDataBoundItems="true"  >   
        <Items>
          <asp:ListItem Value="" Text="" Selected="True" />    
        </Items>                                                                                                    
      </ICCM:ICCMDropDownList>
   </fieldset>
  </div>
</div>

提前致谢。

Answer 1

我知道您应该创建一个新的 div，它将作为其余两个 DIV 的容器。在内部 DIV 上应用样式“float: left”。看看下面的代码，这正如您所期望的那样工作:

    <div style="width:900px">
        <div style="width:50%; height:230px; float:left;">
          <fieldset style="width:150px;">
            <legend>Facilities Required</legend>
            <asp:CheckBox ID="PhysicalMailbox" runat="server" Text="Physical Mailbox" /><br>
            <asp:CheckBox ID="Uniform" runat="server" Text="Uniform"/><br>
            <asp:CheckBox ID="Desk" runat="server" Text="Desk"/><br>
            <asp:CheckBox ID="Stationary" runat="server" Text="Stationary"/>
          </fieldset>
          </div>
          <div style="width:50%; top:0px;float:left;">
            <fieldset style="width:229px; left:151px; float:right; top:0px;" >
              <legend>Access Required</legend>
              <asp:CheckBox ID="AccessTag" runat="server" Text="Access Tag" /><br><br>
              <asp:Label ID="lblProfile" enableviewstate="false" runat="server" AssociatedControlID="ddProfile" CssClass="FormLabel">Profile</asp:Label>
              <ICCM:ICCMDropDownList ID="ddProfile" runat="server" TabIndex="10" style="width:233px;" AppendDataBoundItems="true"  >   
                <Items>
                  <asp:ListItem Value="" Text="" Selected="True" />    
                </Items>                                                                                                    
              </ICCM:ICCMDropDownList>
           </fieldset>
        </div>
    </div>