Почему вторая колонка располагается ниже первой?
Я пытаюсь сделать такую форму с помощью asp .NET:
У меня при запуске пока получается вот это:
Делаю всю разметку через div. В форме есть общий div, содержащий два div с классами column1 и column2
Вот весь код формы:
<form id="form1" runat="server">
<div>
<div style="height: 524px; background-color:aquamarine">
<div class="column1">
<div>
<asp:Label ID="productLabel" runat="server" Text="Товар"></asp:Label>
<asp:DropDownList ID ="productList" runat="server" Height="29px">
<asp:ListItem Selected ="True" Enabled="true" Text="Монитор" Value ="5000"></asp:ListItem>
<asp:ListItem Selected ="False" Enabled="true" Text="Блок питания" Value ="2800"></asp:ListItem>
<asp:ListItem Selected ="False" Enabled="true" Text="Клавиатура" Value ="1200"></asp:ListItem>
</asp:DropDownList>
</div>
<div style="width: 190px; height: 27px;">
<asp:Label ID ="costLabel" runat="server" Text="Цена"></asp:Label>
<asp:TextBox ID ="costValue" runat ="server" Enabled ="false" Width="119px"></asp:TextBox>
<asp:Label runat="server" Text="руб."></asp:Label>
</div>
<div style="width: 179px">
<asp:Label runat ="server" Text="Количество"></asp:Label>
<asp:TextBox runat="server" Width="88px"></asp:TextBox>
</div>
<div style="height: 24px; width: 185px">
<asp:Label ID="BasketLabel" runat="server" Text="Товары к оплате"></asp:Label>
<asp:ListBox ID="ListBox1" runat="server" Height="344px" Width="188px"></asp:ListBox>
</div>
</div>
<div class ="column2">
<div style="width: 176px; display : inline-block">
<asp:Label ID ="DataLabel" runat="server" Text="Дата"></asp:Label>
<asp:Button ID ="CalendarButton" runat="server" Text=">" Width="20px" OnClick="CalendarButton_Click" />
<asp:Calendar ID ="Calendar" runat ="server" BackColor="White" BorderColor="#3366CC" BorderWidth="1px" CellPadding="1" DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt" ForeColor="#003399" Height="136px" Width="129px">
<DayHeaderStyle BackColor="#99CCCC" ForeColor="#336666" Height="1px" />
<NextPrevStyle Font-Size="8pt" ForeColor="#CCCCFF" />
<OtherMonthDayStyle ForeColor="#999999" />
<SelectedDayStyle BackColor="#009999" Font-Bold="True" ForeColor="#CCFF99" />
<SelectorStyle BackColor="#99CCCC" ForeColor="#336666" />
<TitleStyle BackColor="#003399" BorderColor="#3366CC" BorderWidth="1px" Font-Bold="True" Font-Size="10pt" ForeColor="#CCCCFF" Height="25px" />
<TodayDayStyle BackColor="#99CCCC" ForeColor="White" />
<WeekendDayStyle BackColor="#CCCCFF" />
</asp:Calendar>
</div>
<div style="height: 24px; width: 187px">
<asp:Label runat ="server" Text ="Покупатель"></asp:Label>
<asp:TextBox runat="server"></asp:TextBox>
</div>
<div style="width: 143px">
<asp:Button ID ="addButton" runat="server" Text="Добавить" />
<asp:Button ID ="deleteButton" runat="server" Text="Удалить" />
<asp:Button ID ="clearButton" runat="server" Text="Очистить список" />
<asp:Button ID ="invoiceButton" runat="server" Text="Квитанция" />
</div>
</div>
</div>
</div>
</form>
Вот мой css-код:
div {
display : inline-block;
}
.column1 {
justify-content : left;
}
.column1 div {
display: block;
margin-top : 20px;
margin-bottom: 20px;
}
.column1 label {
margin-left : 20px;
}
.column2 {
justify-content : right;
}
.column2 div {
display : block;
margin-top : 20px;
margin-bottom : 20px;
}
Не пойму почему вторая колонка у меня уехала вниз. Как ее можно поднять?

