如何將兩個div對齊？

我有兩個字段集，我想，以顯示彼此相鄰：如何將兩個div對齊？

enter image description here

我設法得到它的正確距離我從彼此想要的，但一直沒能對陣容有高度。

下面是我用過的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>

在此先感謝。

來源

2014-01-23 Pomster

它很容易@Pomster，Stackoverflow有這麼多的問題和答案關於這個任務時間做網頁搜索？ http://stackoverflow.com/questions/2716955/css-layout-aligning-two-divs-side-by-side和http://stackoverflow.com/questions/4460990/align-2-divs-side-by-邊 –

我明白你應該創建一個新的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>

來源

2014-01-23 12:38:28 Vinay

這工作，你添加了第三個div？ – Pomster

是的，這將作爲容器工作，其浮動屬性將以父容器爲基礎。此外，您在第一個字段集之後錯過了一個緊密的div標籤。 – Vinay

將它們設置爲：

style="display:inline-block;"

正確的整個代碼：

<div style="width:900px; height:230px;"> 
    <div style=" top:0px; display:inline-block;"> 
    <fieldset style="width:150px;"> 

    </fieldset> 
    </div> 
    <div style=" top:0px; display:inline-block;"> 
    <fieldset style="width:229px; left:151px; float:right; top:0px;" > 

    </fieldset> 
    </div> 
</div>

來源

2014-01-23 12:31:46 user2211216

div或fieldset？ – Pomster

嘗試fieldset和右分區。 –

要做的正確的事情是將fieldset放入2個div中，style =「display：inline-block;」並指定它們的寬度。所以在你的情況：一個大的容器div，和2個小divs內部和這兩個div你pu場地集 – user2211216

你可以用第一<fieldset>成<div/>並將其設置float:left

給float:left到<div>

第一字段集

<div style="float:left;"> 
    <fieldset>...</fieldset> 
</div>

注意：您忘了關閉主</div>，同時考慮divs一個是float:left，另一種是從float:right刪除字段集float。

Fiddle DEMO

另一種方式使用display屬性：

您可以設置display:inline-block既含有fieldsetdivs，你可能不得不考慮vertical-alignment :)

來源

2014-01-23 12:37:24

Demo

轉到2 div's這樣的： -

<div style="width:150px; height:230px;">Fieldset 1</div> 
<div style="width: auto; height:230px;">Fieldset 2</div>

來源

2014-01-23 12:39:19 Anup

使用display: inline-block;
DEMO

來源

2014-01-23 12:42:21

如何將兩個div對齊？

回答

相關問題