Question

我有一个奇怪的情况，并认为人们必须很容易帮助我解决这个具体问题。我在子页面上有两个div，我希望彼此相邻显示。我的意思是，一个在左边，一个在右边。之后，在屏幕的底部，我想显示一个覆盖100％宽度的表格。

我在一个div上使用了float，并在另一个div上浮动。然后我在底部显示桌子的标题，然后显示表格我的问题是，尽管我付出了很多努力，但标题显示在这两个div之间。这是我的代码。

   <div id="ContainerDiv" runat="server" style="width: 930px">
        <div id="DivticketDetails" runat="server" visible="false" 
            style="float: left; width: 400px;">
            <asp:Panel ID="PanelTicketDetails" runat="server" BackColor="#8B9FBE">
                <h3 style="color: #FFFFFF; font-weight: bold; text-decoration: underline;">
                    Bowzer Details</h3>
                <table border="1" cellpadding="0" cellspacing="0" class="myTable">
                    <tr>
                        <td bgcolor="#507CD1">
                            <asp:Label ID="Label6" runat="server" Text="Field / Customer Name" Font-Bold="True"
                                Font-Size="XX-Small" BorderColor="#507CD1" ForeColor="White"></asp:Label>
                        </td>
                        <td>
                            <asp:Label ID="lbl_FieldName" runat="server" Text="lbl_FieldName" CssClass="myLabel"></asp:Label>
                        </td>
                    </tr>
                    <tr>
                        <td bgcolor="#507CD1">
                            <asp:Label ID="Label3" runat="server" Text="Challan Generated On" Font-Bold="True"
                                Font-Size="XX-Small" BorderColor="#507CD1" ForeColor="White"></asp:Label>
                        </td>
                        <td>
                            <asp:Label ID="lbl_firstEntryDate" runat="server" Text="lbl_firstEntryDate" Font-Size="Small"
                                CssClass="myLabel"></asp:Label>
                        </td>
                    </tr>
                    <tr>
                        <td bgcolor="#507CD1">
                            <asp:Label ID="Label4" runat="server" Text="Product Name" Font-Bold="True" Font-Size="XX-Small"
                                BorderColor="#507CD1" ForeColor="White"></asp:Label>
                        </td>
                        <td>
                            <asp:Label ID="lbl_ProductName" runat="server" Text="lbl_ProductName" Font-Size="Small"
                                CssClass="myLabel"></asp:Label>
                        </td>
                    </tr>
                    <tr>
                        <td bgcolor="#507CD1">
                            <asp:Label ID="Label2" runat="server" Text="Bowzer No" Font-Bold="True" Font-Size="XX-Small"
                                BorderColor="#507CD1" ForeColor="White"></asp:Label>
                        </td>
                        <td>
                            <asp:Label ID="lbl_bowzerNo" runat="server" Text="lbl_bowzerNo" Font-Size="Small"
                                CssClass="myLabel"></asp:Label>
                        </td>
                    </tr>
                    <tr>
                        <td bgcolor="#507CD1">
                            <asp:Label ID="Label28" runat="server" Text="Quantity" Font-Bold="True" Font-Size="XX-Small"
                                BorderColor="#507CD1" ForeColor="White"></asp:Label>
                        </td>
                        <td>
                            <asp:Label ID="lbl_BowQuantity" runat="server" Text="lbl_BowQuantity" Font-Size="Small"
                                CssClass="myLabel"></asp:Label>
                        </td>
                    </tr>
                </table>
            </asp:Panel>
        </div>
        <div id="Div2" runat="server" style="float: right; width: 429px;">
            <asp:Panel ID="PanelBowzerHistory" runat="server" BackColor="#8B9FBE" Visible="False">
                <h3 style="font-weight: bold; text-decoration: underline; color: #FFFFFF">
                    Bowzer History
                </h3>
                <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="4"
                    DataKeyNames="challan_id" DataSourceID="DSBowzerHistory" Font-Size="Smaller"
                    ForeColor="#333333" GridLines="None" AllowPaging="True" PageSize="4">
                    <AlternatingRowStyle BackColor="White" />
                    <Columns>
                        <asp:BoundField DataField="FirstWeight" HeaderText="FirstWeight" SortExpression="FirstWeight" />
                        <asp:BoundField DataField="Firstentry_date" HeaderText="Firstentry_date" SortExpression="Firstentry_date" />
                        <asp:BoundField DataField="SecondWeight" HeaderText="SecondWeight" SortExpression="SecondWeight" />
                        <asp:BoundField DataField="netWeight" HeaderText="netWeight" SortExpression="netWeight" />
                        <asp:BoundField DataField="SecondEntry_Date" HeaderText="SecondEntry_Date" SortExpression="SecondEntry_Date" />
                        <asp:BoundField DataField="challan_id" HeaderText="challan_id" InsertVisible="False"
                            ReadOnly="True" SortExpression="challan_id" />
                    </Columns>
                    <EditRowStyle BackColor="#2461BF" />
                    <FooterStyle BackColor="#507CD1" ForeColor="White" Font-Bold="True" />
                    <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
                    <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
                    <RowStyle BackColor="#EFF3FB" />
                    <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
                    <SortedAscendingCellStyle BackColor="#F5F7FB" />
                    <SortedAscendingHeaderStyle BackColor="#6D95E1" />
                    <SortedDescendingCellStyle BackColor="#E9EBEF" />
                    <SortedDescendingHeaderStyle BackColor="#4870BE" />
                </asp:GridView>
            </asp:Panel>
        </div>
    </div>

    <div id="tblDetailsDiv" runat="server" visible="False" title="Ticket Details" style="width: 930px;
        background-color: #8B9FBE;">
                <h3 style="font-size: medium; color: #FFFFFF; font-weight: bold; width: 930px; background-color: #00FF00;">
                Enter Details Here</h3>
            <table id="tblDetails" title="Enter Details" border="0" cellpadding="0" cellspacing="0"
                class="myTable" frame="border">
                <tr>
                    <td>

                    </td>
                    <td>
</table>
</div>

以下是它的显示方式。

Answer 1

尝试将第二个div的浮点数更改为左侧，并在这两个div之后。像这样：

enter image description here

在这两个div之后添加一个风格清晰的新div。

<div style=”clear: both”></div> 希望它有效。

你去吧。我添加了上面的代码

Page Div对齐无法正确显示

1 个答案: