Css DIV内控件的定位

我有一组控件，当用户单击按钮时，这些控件将显示/隐藏。控件由一个网格、两个标签、一个下拉列表、一个文本框和另一个按钮组成。我想将其定位如下：

我已经正确定位了网格，但下拉框和文本框控件位于网格的左侧，但在网格的下方。按钮未居中。 如何定位DIV，使控件位于网格旁边，按钮显示在主面板的中间但位于底部

这是我的化妆：

 <asp:Button ID="btnShowMappingPanel" runat="server" Text="Update Value(s) in Multiple Mappings" Width="325px" />
             <asp:Panel ID="pnlMultipleMappingControls" runat="server" Height="300px" Width="1000px" style="display:none;" BackColor="White" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px">
                <div id="divMultiMapGrid" style="margin: 25px; width:45%">
                 <asp:GridView ID="msmgvMultiMappingSelection" runat="server" AllowPaging="True" PageSize="4" AllowSorting="True" AutoGenerateColumns="False" Caption="Select Multiple Mappings to Update" 
                        CaptionAlign="Top" CssClass="grid" Visible="true">
                        <Columns>
                            <asp:TemplateField HeaderText="Select">
                                <EditItemTemplate>
                                    <asp:CheckBox ID="msmgvCkBoxEditSelect" runat="server" />
                                </EditItemTemplate>
                                <ItemTemplate>
                                    <asp:CheckBox ID="msmgvCkBoxSelect" runat="server" />
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField HeaderText="Mapping ID">                  
                                <ItemTemplate>
                                    <asp:Label ID="msmgvLblMappingID" runat="server" Text='<%# Bind("EnrollmentMappingID") %>'></asp:Label>
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField HeaderText="Schoology Course ID">
                                <ItemTemplate>
                                    <asp:Label ID="msmgvLblSchoologyCourseID" runat="server" Text='<%# Bind("SchoologyCourseID") %>'></asp:Label>
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField HeaderText="CE City Activity ID">            
                                <ItemTemplate>
                                    <asp:Label ID="msmgvLblCECityActivityID" runat="server"  Text='<%# Bind("CECityActivityID") %>'></asp:Label>
                                </ItemTemplate>
                            </asp:TemplateField>
                        </Columns>
                    </asp:GridView>
                 </div>
                 <div id="divMultiMapControls" style="float:right; width:45%; padding:5px">
                    <div id="divMultiMapActiveCtrl" style="padding:10px">
                        <asp:Label ID="lblActive"  runat="server" Text="Is Active: " CssClass="label"></asp:Label>
                        <asp:DropDownList ID="ddlActiveOptions" runat="server">
                            <asp:ListItem> </asp:ListItem>
                            <asp:ListItem>Yes</asp:ListItem>
                            <asp:ListItem>No</asp:ListItem>
                        </asp:DropDownList>
                    </div>
                     <div id="divMultiMapMaxEnrollCtrl"  style="padding:10px">
                        <asp:Label ID="lblMaxEnrollment" runat="server" Text="Maximum Enrollment: " CssClass="label"></asp:Label>
                        <asp:TextBox ID="txtBoxMapEnroll" runat="server" Width="25%"></asp:TextBox>
                        <asp:RegularExpressionValidator ID="RegularExpressionValidator1" ControlToValidate="txtBoxMapEnroll" runat="server" 
                                             ErrorMessage="Enter only integers." ValidationGroup="multiMapEditMappingValidation" ValidationExpression="^\d+$" 
                                             Display="Dynamic" CssClass="message-error">
                        </asp:RegularExpressionValidator>
                    </div>
                </div>
                <div id="divMultiMapUpdateBtn">
                <asp:Button ID="btnUpdateSelectedMappings" runat="server" Text="Update Selected Mappings" Width="200px" CausesValidation="true" 
                    ValidationGroup="multiMapEditMappingValidation" OnClick="btnUpdateSelectedMappings_Click" /> 
                </div>
             </asp:Panel>

对
不

根据要求，这是JSFIDLE

<panel>
<div id="divMultiMapGrid" style="margin: 25px; width:45%">Grid is here</div>
<div id="divMultiMapControls" style="float:right; width:45%; padding:5px">Controls are here
<div id="divMultiMapActiveCtrl" style="padding:10px">Dropdown control</div>
<div id="divMultiMapMaxEnrollCtrl"  style="padding:10px">text box control</div>
    </div>
<div id="divMultiMapUpdateBtn">Button</div>

网格在这里
这里有控制装置
下拉控制
文本框控件
按钮

---

首先，不要使用内联CSS。以后管理起来会很困难

现在回答你的问题：

#divMultiMapGrid {
margin: 25px;
width: 45%;
float: left;
}

#divMultiMapControls {
float: right;
width: 45%;
padding: 5px;
}

#divMultiMapActiveCtrl {
  padding: 10px;
}

#divMultiMapMaxEnrollCtrl {
  padding: 10px;
}
#divMultiMapUpdateBtn {
  clear: both;
  margin: auto;
  width: 104px; // adjust width based on button
}

如果您仍然只对内联样式感兴趣，那么

<panel>
<div id="divMultiMapGrid" style="margin: 25px; width:45%;float: left;">Grid is here</div>
<div id="divMultiMapControls" style="float:right; width:45%; padding:5px">Controls are here
<div id="divMultiMapActiveCtrl" style="padding:10px">Dropdown control</div>
<div id="divMultiMapMaxEnrollCtrl" style="padding:10px">text box control</div>
    </div>
<div id="divMultiMapUpdateBtn" style=" clear: both; margin: auto; width: 104px;">Button</div>

</panel>

网格在这里
这里有控制装置
下拉控制
文本框控件
按钮

请在此基础上创建一个JSFIDLE，使用生成的HTML，而不是这里的每个人都理解的asp.net代码。我们也无法判断您是否没有从codebehind设置其他属性，因此查看HTML代码肯定会更有帮助。我认为您只需要将CSS float属性添加到面板（我的意思是）。对不起，如果我错了，我不知道ASP。但是根据基本的理解，你需要把float:left放在面板上。面板将像div一样工作，因此div将自动一个接一个地垂直保存内容。为了获得预期的结果，您需要使用组件的CSS样式。当我这样做时，所有控件都会移到左侧。您最好！工作起来很有魅力！谢谢我用了第一个选项。太好了，很高兴听到你用了第一个选项：）