当我隐藏DIV时，为什么显示空间距
我有2个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;
}
}
4 个答案:
答案 0 :(得分：3)
您是否尝试过使用display:none;隐藏div？要再次显示div，您可以使用display:block;。只需执行visibility:hidden将保留div占用的空间。
答案 1 :(得分：1)
如果我理解正确的话，您希望使用display:none代替visibility:hidden以删除元素而不占用空间。
答案 2 :(得分：1)
当您使用visibility:hidden隐藏div时，它只会隐藏元素，但浏览器仍会在页面上保留一个位置。但是，如果您使用display: none，则页面上将不会显示元素，并且不会保留任何空格。
答案 3 :(得分：-1)
你的头寸是绝对的，如果你使用相对头寸并且没有指定top属性，你应该得到预期的结果。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？