Как выровнять два 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. Примените стиль «float: left» на внутренних DIV. Взгляните ниже код, это работает так, как вы ожидаете:

<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

Да, это будет работать как контейнер, и их свойство float будет основываться на родительском контейнере. Кроме того, вы пропустили один тег close 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

The div или fieldset ?? – Pomster

Попробуйте установить как полевой, так и правый div. –

Правильная вещь, чтобы сделать, состоит в том, чтобы поместить поля внутри 2 divs со стилем = "display: inline-block;" и укажите их ширину.поэтому в вашем случае: один большой контейнер div и 2 маленьких div внутри и внутри этих 2 divs вы pu наборы полей – user2211216

Вы можете обернуть первый <fieldset> в <div/> и установить его float:left

Дайте float:left к тому, что <div>

первый FIELDSET

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

Примечание: Вы забыли закрыть главную </div>, Рассмотрим как divs один float:left и другое float:right удалить float из полей.

Fiddle DEMO

Другой способ использует display свойства:

Вы можете установить display:inline-block в оба divs, содержащие fieldset, вы, возможно, придется рассмотреть 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 рядом друг с другом?

ответ

Смежные вопросы