0
我有2個div的如下基於檢查我會顯示相應的DIV，但是當我顯示第二個div被第一個div佔據的空間顯示一個空的空間和第二個div顯示在它的位置。這是我寫爲什麼空的間距顯示當我隱藏一個DIV
樣式表
<style type="text/css">
.style1
{
width: 268px;
height: 19px;
position: absolute;
top: 16px;
left: 335px;
float: left;
z-index: 1;
}
.style2
{
width: 502px;
height: 20px;
position: absolute;
top: 51px;
left: 226px;
z-index: 1;
float:left;
}
.style3
{
position: absolute;
top: 68px;
left: 773px;
float: right;
z-index: 1;
background-color: #c0c0c0;
height: auto;
width: 162px;
}
.add_emp_bor
{
text-align: center;
border: 1px dotted #000;
background-color: #c0c0c0;
}
.add_emp_bor1
{
text-align: center;
border: 1px dotted #000;
}
.center
{
text-align: center;
background-color: #c0c0c0;
}
.style4
{
width: 83px;
height: 19px;
position: absolute;
top: 96px;
left: 353px;
z-index: 1;
}
.ddlcenter
{
text-align: center;
}
.style5
{
width: 933px;
height: 40px;
position: absolute;
top: 244px;
left: 9px;
z-index: 1;
}
.style6
{
width: 164px;
position: absolute;
top: 325px;
left: 23px;
z-index: 1;
}
.style7
{
width: 164px;
position: absolute;
top: 325px;
left: 221px;
z-index: 1;
}
.style8
{
width: 164px;
height: 21px;
position: absolute;
top: 325px;
left: 426px;
z-index: 1;
}
.style9
{
width: 164px;
height: 21px;
position: absolute;
top: 324px;
left: 622px;
z-index: 1;
}
.style10
{
width: 164px;
height: 21px;
position: absolute;
top: 324px;
left: 812px;
z-index: 1;
}
.style11
{
width: 995px;
height: 20px;
position: absolute;
top: 340px;
left: 11px;
float:left;
z-index: 1;
}
.style12
{
position: absolute;
top: 373px;
left: 13px;
float: left;
z-index: 1;
}
.style13
{
width: 357px;
height: 27px;
position: absolute;
top: 17px;
left: 654px;
float: left;
z-index: 1;
}
.style14
{
width: 629px;
height: 27px;
position: absolute;
top: 52px;
left: 16px;
float: left;
z-index: 1;
}
.style15
{
width: 634px;
height: 27px;
position: absolute;
top: 93px;
left: 15px;
float: left;
z-index: 1;
}
.style16
{
width: 312px;
height: 52px;
position: absolute;
top: 60px;
left: 676px;
float: left;
z-index: 1;
}
.style17
{
width: 65px;
height: 19px;
position: absolute;
top: 117px;
left: 786px;
float:left;
z-index: 1;
}
.style18
{
width: 998px;
height: 20px;
position: absolute;
top: 125px;
left: 2px;
float: left;
z-index: 1;
}
.style19
{
width: 89px;
height: 77px;
position: absolute;
top: 37px;
left: 12px;
float:left;
z-index: 1;
}
.style20
{
width: 137px;
height: 39px;
position: absolute;
top: 532px;
left: 11px;
float: left;
z-index: 1;
}
.style21
{
width: 96px;
height: 77px;
position: absolute;
top: 37px;
float:left;
left: 135px;
z-index: 1;
}
.style22
{
width: 96px;
height: 77px;
position: absolute;
top: 38px;
left: 270px;
float:left;
z-index: 1;
}
.style23
{
width: 96px;
height: 76px;
position: absolute;
top: 39px;
left: 403px;
float:left;
z-index: 1;
}
.style24
{
width: 96px;
height: 77px;
position: absolute;
top: 36px;
left: 547px;
float:left;
z-index: 1;
}
.style25
{
width: 306px;
height: 72px;
position: absolute;
top: 48px;
left: 677px;
z-index: 1;
}
.style26
{
width: 137px;
height: 39px;
position: absolute;
top: 686px;
left: 11px;
float: left;
z-index: 1;
}
.style27
{
width: 8px;
height: 43px;
position: absolute;
top: 56px;
left: 532px;
float:left;
z-index: 1;
}
.style28
{
width: 137px;
height: 52px;
position: absolute;
top: 33px;
float:left;
left: 103px;
z-index: 1;
}
.style29
{
width: 95px;
height: 52px;
position: absolute;
top: 32px;
float:left;
left: 0px;
z-index: 1;
}
.style30
{
width: 8px;
height: 43px;
position: absolute;
top: 36px;
left: 223px;
float:left;
z-index: 1;
}
.style31
{
width: 412px;
height: 27px;
position: absolute;
top: 20px;
left: 0px;
float:left;
}
.style32
{
width: 412px;
height: 27px;
position: absolute;
top: 16px;
left: 245px;
float:left;
z-index: 1;
}
.style33
{
width: 306px;
height: 72px;
position: absolute;
top: 29px;
float:left;
left: 677px;
z-index: 1;
}
.style34
{
width: 65px;
height: 19px;
position: absolute;
top: 91px;
left: 786px;
float:left;
z-index: 1;
}
.style35
{
width: 998px;
height: 20px;
position: absolute;
top: 100px;
left: 2px;
float: left;
z-index: 1;
}
</style>
<div id="divStarr" runat="server" class="style12" visible="false">
<div style="float: left; border-bottom: 1px solid #000; font-weight: bold;">
STAAR
</div>
<br />
<div class="style13">
<asp:CheckBoxList ID="chklstStaar" runat="server" RepeatDirection="Horizontal" Width="357px">
<asp:ListItem Text="Accomodated"></asp:ListItem>
<asp:ListItem Text="Modified"></asp:ListItem>
<asp:ListItem Text="Alternate"></asp:ListItem>
</asp:CheckBoxList>
</div>
<div class="style14">
<asp:CheckBoxList ID="ChkEnglish" runat="server" RepeatDirection="Horizontal">
<asp:ListItem Text="Reading English "></asp:ListItem>
<asp:ListItem Text="Math English "></asp:ListItem>
<asp:ListItem Text="Science English "></asp:ListItem>
<asp:ListItem Text="Social Studies English "></asp:ListItem>
<asp:ListItem Text="Writing English "></asp:ListItem>
</asp:CheckBoxList>
</div>
<div class="style15">
<asp:CheckBoxList ID="chkSpanish" runat="server" RepeatDirection="Horizontal">
<asp:ListItem Text="Reading Spanish"></asp:ListItem>
<asp:ListItem Text="Math Spanish"></asp:ListItem>
<asp:ListItem Text="Science Spanish"></asp:ListItem>
<asp:ListItem Text="Social Studies Spanish"></asp:ListItem>
<asp:ListItem Text="Writing Spanish"></asp:ListItem>
</asp:CheckBoxList>
</div>
<div class="style16">
<asp:TextBox ID="txtComments" CssClass="add_emp_bor1" runat="server" Height="52px"
Width="306px"></asp:TextBox>
</div>
<div style="text-align: center;" class="style17">
Comments
</div>
<div style="border-bottom: 1px solid #000;" class="style18">
</div>
</div>
<div id="divCourse" runat="server" class="style20" visible="false">
<div style="float: left; border-bottom: 1px solid #000; font-weight: bold;">
End of Course Exam
</div>
<div class="style19">
<asp:CheckBoxList ID="chklstCourse" runat="server" RepeatDirection="Vertical" Width="96px">
<asp:ListItem Text="English I"></asp:ListItem>
<asp:ListItem Text="English II"></asp:ListItem>
<asp:ListItem Text="English III"></asp:ListItem>
</asp:CheckBoxList>
</div>
<div class="style21">
<asp:CheckBoxList ID="chklstCourse1" runat="server" RepeatDirection="Vertical" Width="105px">
<asp:ListItem Text="Algebra I"></asp:ListItem>
<asp:ListItem Text="Geometry"></asp:ListItem>
<asp:ListItem Text="Algebra II"></asp:ListItem>
</asp:CheckBoxList>
</div>
<div class="style22">
<asp:CheckBoxList ID="chklstCourse2" runat="server" RepeatDirection="Vertical" Width="101px">
<asp:ListItem Text="Biology"></asp:ListItem>
<asp:ListItem Text="Chemistry"></asp:ListItem>
<asp:ListItem Text="Physics"></asp:ListItem>
</asp:CheckBoxList>
</div>
<div class="style23">
<asp:CheckBoxList ID="chklstCourse3" runat="server" RepeatDirection="Vertical" Width="146px">
<asp:ListItem Text="World Geography"></asp:ListItem>
<asp:ListItem Text="World History"></asp:ListItem>
<asp:ListItem Text="U.S. History"></asp:ListItem>
</asp:CheckBoxList>
</div>
<div style="border-right: 1px solid #808080;" class="style27">
</div>
<div class="style24">
<asp:CheckBoxList ID="chklstCourse4" runat="server" RepeatDirection="Vertical" Width="125px">
<asp:ListItem Text="Accommodated"></asp:ListItem>
<asp:ListItem Text="Modified"></asp:ListItem>
<asp:ListItem Text="Alternate"></asp:ListItem>
</asp:CheckBoxList>
</div>
<div class="style25">
<asp:TextBox ID="txtComments1" CssClass="add_emp_bor1" runat="server" Height="52px"
Width="306px"></asp:TextBox>
</div>
<div style="text-align: center;" class="style17">
Comments
</div>
<div style="border-bottom: 1px solid #000;" class="style18">
</div>
</div>
樣品圖像
我的代碼可見一個div
protected void chkTaks_CheckedChanged(object sender, EventArgs e)
{
if (chkTaks.Checked)
{
divTAKS.Visible = true;
}
else
{
divTAKS.Visible = false;
}
}
你怎麼隱藏'div'？如果您使用'visibility：hidden'而不是'display：none'，那麼不可見的'div'仍然會佔用空間。 – kei
通過代碼我正在做這 – Dotnet
我試圖不聽起來粗魯，但真的，去閱讀CSS和HTML。使用元素流，不要與它戰鬥。對於你最喜歡的神像的愛，使用比''style1「'，''style2''，...，''style35」'更多的描述性類名。 –