如何强制隐藏+空 <div> 占用空间？答案

【问题标题】：How to force an hidden+empty <div> to take up space?如何强制隐藏+空 <div> 占用空间？
【发布时间】：2010-12-01 13:02:07
【问题描述】：

请注意，我的问题不是关于如何用 <div>. 填充剩余空间

背景：我正在尝试使用 jQuery 可排序的一系列水平布局的<div>, 类"column"

.column
{
  display:inline-block;
}

现在在 FF，一切看起来都很好。在拖动过程中，jQuery sortable 注入的“占位符”是一个空的<div>，带有

<div class="column ui-sortable-placehold" 
     style="visibility:hidden;height:[hh]px;width[ww]px;"/>

“内联块”将导致此“占位符”跨越许多 [ww]px 被拖动的 <div>。

（我有选项“forcePlaceholderSize = true”）

但是，这在 IE7 中会出现问题，因为它只知道 display:inline。但是如果我在 FF 上改为使用"display:inline"，则占位符将不再跨越 [ww]px。

我尝试了许多解决方法，包括：

由于某种原因，它们都不能令人满意地工作。

在我看来，如果我可以在空 div 上强制设置大小，我将能够巧妙地解决这个问题。（当然，最简洁的解决方案总是让@#$% IE 符合标准...）

欢迎使用好的解决方法。

请帮忙！

【问题讨论】：

【解决方案1】：

.column {
    /* your stuff here */
    width: 100px;
    height: 200px;
}

您还可以使用相关的 CSS 属性，例如 min-width 和 max-height，但我相信这些属性存在 IE6 的限制。

【讨论】：

感谢您的回复，沃伦。 jQuery 实际上已经为占位符 div 添加了宽度/高度，如上所示。而且我需要它为我设置它，因为每个可拖动块的大小不同。我还通过强调 div 是“可见性：隐藏”来澄清我的问题。似乎隐藏的 div 仅在其 "display:inline-block" 时才占用空间？
我不明白你为什么期望隐藏的东西占用空间。隐藏意味着对您的文档没有可见的影响。似乎您希望 div 为空，但只占用空间。如果是这样，您可以完全删除“隐藏”和“显示”样式。由于 div 没有内容，因此它只是文档中的一个占位块。您可以稍后用内容填充 div，并且它的大小不会改变，假设您还设置了“溢出：无”。
这不是真的。黑白“显示”和“可见性”是有区别的。根据此页面stackoverflow.com/questions/1479239/…“当可见性设置为隐藏时，被隐藏的元素仍然在页面布局中占据相同的位置。”正如我在帖子中解释的那样，jQuery-ui-sortable 插件将占位符 div 插入为一个空+隐藏的元素。我不想修改插件代码，所以正在寻找方法让它占用空间而没有“显示：内联块”，这在 IE7 上不起作用。

【解决方案2】：

让空元素占据空间的经典方法是在其中添加&nbsp;。在这种情况下会有所帮助吗？

【讨论】：

【解决方案3】：

赛锐，

您可以在 IE7+ 中显式强制使用占位符尺寸。试试下面的代码：

$('.wpzone').sortable({
  sort: function (e, ui) { 
    $(".ui-state-highlight").css({"width":"100%", "height" : ui.item.height()});
  }
});

我的CSS：

.ui-state-highlight { width: 100%; height:auto; clear:left; border: 1px dashed #333; background-color: #d3dfd1; z-index:1; }

我不认为 CSS 会影响它。

【讨论】：

【解决方案4】：

CSS 可以用来创建一个空的 div。

<style>
.empty {  
border-left:solid 10px white; 
border-right:solid 10px white; 
} 
</style>

上面的样式，如果应用到一个空的div上，会创建一个宽度为20px的空间。

【讨论】：