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

Question

请注意，我的问题不是如何使用<div>.

填充剩余空间

背景： 我正在尝试使用jQuery sortable与一系列水平布局<div>,和类"column"

.column
{
  display:inline-block;
}

现在在FF中，一切看起来都不错。在拖动过程中，jQuery可排序注入的“占位符”是一个空的<div>和

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

“inline-block”会导致此“占位符”跨越[ww]px被拖动的<div>。

（我有选项“forcePlaceholderSize = true”）

然而，这在IE7中出现故障，因为它只知道显示：内联。但是，如果我更改为在FF上使用"display:inline"，则占位符将不再跨越[ww]px。

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

• 指定我自己的占位符样式。
• 基于jQuery.browser.msie切换css。
• 动态css表达。

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

在我看来，只要我能在空div上强制大小，我就能整齐地解决这个问题。 （当然，最简单的解决方案始终是@＃$％IE符合标准，以...开头）。

欢迎良好的解决方法。

请帮忙！

Answer 1

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

你也可以使用相关的CSS属性，如min-width和max-height，但我相信IE6存在局限性。

Answer 2

使空元素占用空间的经典方法是在其中添加 。在这种情况下，这有用吗？

Answer 3

XERION，

您可以在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不会影响它。

Answer 4

CSS可用于创建空div。

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

如果应用于空div，则上述样式将创建宽度为20px的空间。