在我的 .net 应用程序中，我有一个 Accordion 面板，下面有一个网格视图。问题是当展开 Accordion 面板时，它与我的网格视图重叠。这是我的代码：-
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="VanSales.WebForm1" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="ajx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<style type="text/css">
.text-input-normal
{
border: none;
background: transparent;
width: 196px;
height: 26px;
border: none;
padding-left: 5px;
background-image: url('Images/TextBoxBackground.gif');
background-repeat: no-repeat;
color: #897F67;
font-weight: bold;
}
.list-item-normal
{
border: none;
background: transparent;
width: 200px;
padding: 10px;
height: 100px;
border: none;
background-image: url('Images/ListItemsBackground.gif');
background-repeat: no-repeat;
color: #897F67;
font-weight: bold;
}
.drop-down-list .ajax__combobox_inputcontainer .ajax__combobox_textboxcontainer input
{
border: none;
background: transparent;
width: 166px;
padding-left: 5px;
height: 28px;
border: none;
background-image: url('Images/ComboBackground.gif');
background-repeat: no-repeat;
color: #897F67;
font-weight: bold;
}
.drop-down-list .ajax__combobox_inputcontainer .ajax__combobox_buttoncontainer button
{
margin: 0;
padding: 0;
background-color: #197fbc;
background-image: url('Images/ComboArrow.gif');
background-position: top left;
border: 0px none;
height: 28px;
width: 28px;
background-repeat: no-repeat;
}
.drop-down-list .ajax__combobox_itemlist
{
border-color: #7F9DB9;
color: #897F67;
font-weight: bold;
}
/* Accordion */.accordion
{
width: 400px;
}
.accordionHeader
{
border: 3px solid #4498c2;
color: #897F67;
background-color: White;
font-family: Arial, Sans-Serif;
font-size: 12px;
font-weight: bold;
padding: 5px;
margin-top: 5px;
cursor: pointer;
}
.accordionHeaderSelected
{
border: 3px solid #4498c2;
color: #897F67;
background-color: #dfdbd6;
font-family: Arial, Sans-Serif;
font-size: 12px;
font-weight: bold;
padding: 5px;
margin-top: 5px;
cursor: pointer;
}
.accordionContent
{
background: transparent;
border: 3px solid #4498c2;
padding-bottom: 25px;
border-top: none;
padding: 5px;
padding-bottom: 10px;
}
.clear
{
clear: both;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<ajx:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</ajx:ToolkitScriptManager>
<div style="background-image:url('Images/BackgroundDIV.gif');background-repeat:repeat-x;margin:auto;width:800px;height:1100px;">
<!-- 1st row -->
<div style="width: 600px;margin:auto;height:140px;">
<!-- left floated div column 1-->
<div style="height: 45px; width: 250px; float: left;margin-bottom:10px;margin-top:10px;">
<asp:Label ID="Label16" runat="server" Text="Group:" Font-Bold="True"
ForeColor="White"></asp:Label>
<div style="">
<ajx:ComboBox runat="server" ID="ComboBox7" DropDownStyle="DropDownList" CssClass="drop-down-list"
AutoCompleteMode="SuggestAppend">
<asp:ListItem Value="2">Sales Returns</asp:ListItem>
<asp:ListItem Value="0">Sales Only</asp:ListItem>
<asp:ListItem Value="1">Returns Only</asp:ListItem>
</ajx:ComboBox>
</div>
</div>
<!-- end left floated div column 1-->
<!-- right floated div column 2-->
<div style="height: 45px; width: 250px; float: right;margin-bottom:10px;margin-top:10px;">
<asp:Label ID="Label17" runat="server" Text="Company Name:" Font-Bold="True"
ForeColor="White"></asp:Label>
<div style="">
<asp:TextBox ID="TextBox3" runat="server" CssClass="text-input-normal" ></asp:TextBox>
</div>
</div>
<!-- end right floated div column 2-->
<!-- left floated div column 3-->
<div style="height: 45px; width: 250px; float: left;margin-bottom:10px;margin-top:10px;">
<asp:Label ID="Label18" runat="server" Text="Company:" Font-Bold="True"
ForeColor="White"></asp:Label>
<div style="">
<ajx:ComboBox runat="server" ID="ComboBox8" DropDownStyle="DropDownList" CssClass="drop-down-list"
AutoCompleteMode="SuggestAppend">
<asp:ListItem Value="2">Sales Returns</asp:ListItem>
<asp:ListItem Value="0">Sales Only</asp:ListItem>
<asp:ListItem Value="1">Returns Only</asp:ListItem>
</ajx:ComboBox>
</div>
</div>
<!-- end left floated div column 3-->
<!-- right floated div column 4-->
<div style="height: 45px; width: 250px; float: right;margin-bottom:10px;margin-top:10px;">
<asp:Label ID="Label19" runat="server" Text="Description:" Font-Bold="True"
ForeColor="White"></asp:Label>
<div style="">
<asp:TextBox ID="TextBox4" runat="server" CssClass="text-input-normal" ></asp:TextBox>
</div>
</div>
<!-- end right floated div column 4-->
</div>
<!-- End 1st row -->
<!-- 2nd row -->
<div style="width: 600px;margin:auto;height:182px;">
<!-- left floated div column 1-->
<div style="height: 150px; width: 250px; float: left; padding-bottom: 10px;margin-bottom:10px;margin-top:10px;">
<asp:Label ID="Label4" runat="server" Text="Qualification Items:" Font-Bold="True"
ForeColor="White"></asp:Label>
<div style="">
<ajx:ComboBox runat="server" ID="ComboBox4" DropDownStyle="DropDownList" CssClass="drop-down-list"
AutoCompleteMode="SuggestAppend">
<asp:ListItem Value="2">Sales Returns</asp:ListItem>
<asp:ListItem Value="0">Sales Only</asp:ListItem>
<asp:ListItem Value="1">Returns Only</asp:ListItem>
</ajx:ComboBox>
</div>
<asp:Label ID="Label8" runat="server" Text="Items in Group:" Font-Bold="True" ForeColor="White"></asp:Label>
<div style="">
<asp:ListBox ID="ListBox1" runat="server" CssClass="list-item-normal">
<asp:ListItem>ABCKJHKJ</asp:ListItem>
<asp:ListItem>ABCKJHKJ</asp:ListItem>
<asp:ListItem>ABCKJHKJ</asp:ListItem>
<asp:ListItem>ABCKJHKJ</asp:ListItem>
<asp:ListItem>ABCKJHKJ</asp:ListItem>
<asp:ListItem>ABCKJHKJ</asp:ListItem>
<asp:ListItem>ABCKJHKJ</asp:ListItem>
<asp:ListItem>ABCKJHKJ</asp:ListItem>
<asp:ListItem>ABCKJHKJ</asp:ListItem>
<asp:ListItem>ABCKJHKJ</asp:ListItem>
<asp:ListItem>ABCKJHKJ</asp:ListItem>
</asp:ListBox>
</div>
</div>
<!-- end left floated div column 1-->
<!-- right floated div column 2-->
<div style="height: 153px; width: 250px; float: right; padding-bottom: 10px;margin-bottom:10px;margin-top:10px;">
<asp:Label ID="Label5" runat="server" Text="Qualification Items:" Font-Bold="True"
ForeColor="White"></asp:Label>
<div style="">
<ajx:ComboBox runat="server" ID="ComboBox3" DropDownStyle="DropDownList" CssClass="drop-down-list"
AutoCompleteMode="SuggestAppend">
<asp:ListItem Value="2">Sales Returns</asp:ListItem>
<asp:ListItem Value="0">Sales Only</asp:ListItem>
<asp:ListItem Value="1">Returns Only</asp:ListItem>
</ajx:ComboBox>
</div>
<asp:Label ID="Label6" runat="server" Text="Items in Group:" Font-Bold="True" ForeColor="White"></asp:Label>
<div style="">
<asp:ListBox ID="ListBox2" runat="server" CssClass="list-item-normal">
<asp:ListItem>ABCKJHKJ</asp:ListItem>
<asp:ListItem>ABCKJHKJ</asp:ListItem>
<asp:ListItem>ABCKJHKJ</asp:ListItem>
<asp:ListItem>ABCKJHKJ</asp:ListItem>
</asp:ListBox>
</div>
</div>
<!-- end right floated div column 2-->
</div>
<!-- End 2nd row -->
<!-- 3rd row -->
<div style="width: 600px;margin:auto;height:263px;">
<!-- left floated div column 3-->
<div style="height: 45px; width: 250px; float: left;margin-bottom:10px;margin-top:10px;">
<asp:Label ID="Label7" runat="server" Text="Promotion No:" Font-Bold="True" ForeColor="White"></asp:Label>
<div style="">
<asp:TextBox ID="TextBox1" runat="server" CssClass="text-input-normal"></asp:TextBox>
</div>
</div>
<!-- end left floated div column 3-->
<!-- right floated div column 4-->
<div style="height: 45px; width: 250px; float: right;margin-bottom:10px;margin-top:10px;">
<asp:Label ID="Label9" runat="server" Text="Promotion Description:" Font-Bold="True"
ForeColor="White"></asp:Label>
<div style="">
<asp:TextBox ID="TextBox2" runat="server" CssClass="text-input-normal"></asp:TextBox>
</div>
<!-- end right floated div column 4-->
</div>
<!-- left floated div column 5-->
<div style="height: 45px; width: 250px; float: left;margin-bottom:10px;margin-top:10px;">
<asp:Label ID="Label10" runat="server" Text="Promotion Type:" Font-Bold="True"
ForeColor="White"></asp:Label>
<div style="">
<ajx:ComboBox runat="server" ID="ComboBox2" DropDownStyle="DropDownList" CssClass="drop-down-list"
AutoCompleteMode="SuggestAppend">
<asp:ListItem Value="2">Sales Returns</asp:ListItem>
<asp:ListItem Value="0">Sales Only</asp:ListItem>
<asp:ListItem Value="1">Returns Only</asp:ListItem>
</ajx:ComboBox>
</div>
</div>
<!-- end left floated div column 5-->
<!-- right floated div column 6-->
<div style="height: 45px; width: 250px; float: right;margin-bottom:10px;margin-top:10px;">
<asp:Label ID="Label11" runat="server" Text="Promotion Status:" Font-Bold="True"
ForeColor="White"></asp:Label>
<div style="">
<asp:CheckBox runat="server" ID="PromotionActiveCheckbox" Text="Active" Checked="true"
ForeColor="White" />
</div>
</div>
<!-- end right floated div column 6-->
<!-- left floated div column 7-->
<div style="height: 45px; width: 250px; float: left;margin-bottom:10px;margin-top:10px;">
<asp:Label ID="Label12" runat="server" Text="Qualification Type:" Font-Bold="True"
ForeColor="White"></asp:Label>
<div style="">
<ajx:ComboBox runat="server" ID="ComboBox1" DropDownStyle="DropDownList" CssClass="drop-down-list"
AutoCompleteMode="SuggestAppend">
<asp:ListItem Value="2">Sales Returns</asp:ListItem>
<asp:ListItem Value="0">Sales Only</asp:ListItem>
<asp:ListItem Value="1">Returns Only</asp:ListItem>
</ajx:ComboBox>
</div>
</div>
<!-- end left floated div column 7-->
<!-- right floated div column 8-->
<div style="height: 45px; width: 250px; float: right;margin-bottom:10px;margin-top:10px;">
<asp:Label ID="Label13" runat="server" Text="Promotion Trnsctn. Opt.:" Font-Bold="True"
ForeColor="White"></asp:Label>
<div style="">
<ajx:ComboBox runat="server" ID="CmbTest" DropDownStyle="DropDownList" CssClass="drop-down-list"
AutoCompleteMode="SuggestAppend">
<asp:ListItem Value="2">Sales Returns</asp:ListItem>
<asp:ListItem Value="0">Sales Only</asp:ListItem>
<asp:ListItem Value="1">Returns Only</asp:ListItem>
</ajx:ComboBox>
</div>
</div>
<!-- end right floated div column 8-->
<!-- left floated div column 9-->
<div style="height: 45px; width: 250px; float: left;margin-bottom:10px;margin-top:10px;">
<asp:Label ID="Label14" runat="server" Text="From Date:" Font-Bold="True"
ForeColor="White"></asp:Label>
<div style="">
<asp:TextBox ID="TextBox5" runat="server" CssClass="text-input-normal"></asp:TextBox>
</div>
</div>
<!-- end left floated div column 9-->
<!-- right floated div column 9-->
<div style="height: 45px; width: 250px; float: right;margin-bottom:10px;margin-top:10px;">
<asp:Label ID="Label15" runat="server" Text="To Date:" Font-Bold="True" ForeColor="White"></asp:Label>
<div style="">
<asp:TextBox ID="TextBox6" runat="server" CssClass="text-input-normal" ></asp:TextBox>
</div>
</div>
<!-- end right floated div column 9-->
</div>
<!-- end 3rd row -->
<!-- 4th row -->
<div style="width: 600px; margin: auto;height:188px;">
<div style="height: 45px; width: 250px; float: left; margin-bottom: 10px; margin-top: 10px;">
<asp:Label ID="Label2" runat="server" Text="Promotion Options:" Font-Bold="True" ForeColor="White"></asp:Label>
<div style="">
<ajx:Accordion ID="Accordion1" CssClass="accordion" HeaderCssClass="accordionHeader"
HeaderSelectedCssClass="accordionHeaderSelected" ContentCssClass="accordionContent"
runat="server">
<Panes>
<ajx:AccordionPane runat="server">
<Header>
Payment Type:</Header>
<Content>
<ajx:ComboBox runat="server" ID="ComboBox5" DropDownStyle="DropDownList" CssClass="drop-down-list"
AutoCompleteMode="SuggestAppend">
<asp:ListItem Value="2">Sales Returns</asp:ListItem>
<asp:ListItem Value="0">Sales Only</asp:ListItem>
<asp:ListItem Value="1">Returns Only</asp:ListItem>
</ajx:ComboBox>
</Content>
</ajx:AccordionPane>
<ajx:AccordionPane ID="AccordionPane1" runat="server">
<Header>
Customer Name:</Header>
<Content>
<asp:ListBox ID="ListBox3" runat="server" CssClass="list-item-normal">
<asp:ListItem>ABCKJHKJ</asp:ListItem>
<asp:ListItem>ABCKJHKJ</asp:ListItem>
<asp:ListItem>ABCKJHKJ</asp:ListItem>
<asp:ListItem>ABCKJHKJ</asp:ListItem>
</asp:ListBox>
</Content>
</ajx:AccordionPane>
<ajx:AccordionPane ID="AccordionPane2" runat="server">
<Header>
Group Number:</Header>
<Content>
<ajx:ComboBox runat="server" ID="ComboBox6" DropDownStyle="DropDownList" CssClass="drop-down-list"
AutoCompleteMode="SuggestAppend">
<asp:ListItem Value="2">Sales Returns</asp:ListItem>
<asp:ListItem Value="0">Sales Only</asp:ListItem>
<asp:ListItem Value="1">Returns Only</asp:ListItem>
</ajx:ComboBox>
</Content>
</ajx:AccordionPane>
</Panes>
</ajx:Accordion>
</div>
</div>
</div>
<!-- end 4th row -->
<!-- 5th row -->
<div style="width: 600px; margin: auto; height: 291px;">
<!-- left floated div column 1-->
<div style="height: 200px; width: 250px; float: left; margin-bottom: 10px; margin-top: 10px;">
<asp:Label ID="Label1" runat="server" Text="Group:" Font-Bold="True" ForeColor="White"></asp:Label>
<div style="">
<asp:GridView ID="GridView1" runat="server">
</asp:GridView>
</div>
</div>
<!-- end left floated div column 1-->
</div>
<!-- end 5th row -->
</div>
<!-- End -->
</form>
我已经尝试了该clear:both属性，但它不起作用。有没有其他方法可以解决它。？或者我错过了什么。？