隐藏一个div不让他占位置（可用）

最新推荐文章于 2025-07-01 15:26:38 发布

原创最新推荐文章于 2025-07-01 15:26:38 发布 · 1.4w 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #隐藏不占位置

前端同时被 3 个专栏收录

5 篇文章

订阅专栏

css

4 篇文章

订阅专栏

隐藏不占位置

1 篇文章

订阅专栏

本文介绍了如何使用CSS的display和visibility属性来实现div元素的隐藏。通过display:none可以使div完全不占空间，而visibility:hidden则保留其空间位置。文章还提供了一个使用JavaScript切换可见性的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

div隐藏后不占空间的写法：

可以尝试在div中加入style="DISPLAY: none;"这样就不会占空间了。如果写成：
style="DISPLAY: none;"

visibility属性：
确定元素显示还是隐藏；
visibility="visible|hidden"，visible 显示，hidden 隐藏。
当visibility被设置为"hidden"的时候，元素虽然被隐藏了，但它仍然占据它原来所在的位置。
例如：
<script language="javascript">
function toggleVisibility(me)
{
if (me.style.visibility=="hidden")
{
   me.style.visibility="visible";
}
else 
{   
   me.style.visibility="hidden";   
}
}
</script> 
<div onclick="toggleVisibility(this)" style="position:relative">
第一行文本将会触发"hidden"和"visible"属性，注意第二行的变化。
</div>
<div>因为visibility会保留元素的位置，所以第二行不会移动.</div>