时间戳

首页 > 解决方案 > 使用 CSS，即使不存在 DIV 元素，我如何才能保持一块空白不塌陷？

javascript - 使用 CSS，即使不存在 DIV 元素，我如何才能保持一块空白不塌陷？

问题描述

我有以下元素：标题、描述和图像。标题上方应该有 20px 的空间，如下所示：

像这样

从图片中可以看出，标题上方有一块空格。我希望空间保留在那里，即使标题和描述不存在。例如像这样：

像这样

现在我的问题是，如果没有标题和描述，那么空间正在崩溃，图像正在向上移动，基本上占据了那个空间。

即使没有标题和描述，我如何保留空间？我想申请min-height"titleName" ，但没有奏效。

<div class="myComponent">
 <div class="myContainer">
   <div id="head_Title" class="mainTitle">
    <h2 class="titleName"> This is a Title</h2>
   </div>
   <div id="description" class="mainDescription"></div>
 </div>
</div>

标签： javascripthtmljquerycsssass

解决方案

正如我从您的问题中了解到的那样，当我们删除 div 时，整个 div 都会从 DOM 元素中删除，并且空间也会被删除。

我们可以使用 Visibility CSS 属性。当我们使用visibility:hidden属性时，来自 div 的文本内容对 HTML DOM 是隐藏的，但不会从 div 标签中删除。

您还可以动态添加包含隐藏属性的类。总空间将相当于标题和描述的组合空间。

我创建了一个演示以供参考，没有标题和描述，请看这里https://jsfiddle.net/alepsh/todenjsr

</p>

推荐阅读