2

我正在寻找一种仅在有空间的情况下才显示 div 的解决方案。

在我博客的帖子页面上，我在左侧边栏中显示最新帖子，就像这样......

不不不从不发布页面

我想根据帖子的长度显示不同数量的侧边栏项目。目前我有三个 div 显示不同数量的项目并运行此脚本。

    if ($("#contentheight").height()>960 && $("#contentheight").height()<1200) {
  document.getElementById("threeposts").className += "hide";
}
else if ($("#contentheight").height()>1200 && $("#contentheight").height()<1880) {
  document.getElementById("fiveposts").className += "hide";
}
else if ($("#contentheight").height()>1880) {
  document.getElementById("sevenposts").className += "hide";
}

然而，这并不方便，而且对于非常短的帖子，它根本不显示任何项目。

是否有一种解决方法，例如，我可以为 7 个项目编写代码，但只显示父 div 可以占用的数量？我尝试使用溢出：隐藏，但最终你将最终项目切成两半。

例如，如果有足够的空间容纳三个完整的项目，它们将被显示，但之后的任何项目都不会显示。

4

2 回答 2

0

您可以创建一个隐藏的 div 或未插入 DOM 的具有所需宽度的 div。

然后逐项插入，直到此 div 的高度超过您的帖子的长度。
现在您知道有多少项目可以放入 div。

于 2012-10-17T11:23:14.043 回答
0

尝试这样的事情：

$('#container').children().each( function() {
  var top = $(this).top;
  var height = $(this).height;
  if (top + height > $(this).parent().height()) {
    $(this).className += "hide";
  }
});
于 2012-10-17T11:25:55.277 回答