单击时如何使全宽div出现在网格项下

Question

我试图使一个完整宽度的内容框出现在单击时的网格项下方...当网格为4宽时，它会出现，但是由于绝对位置的原因，它掩盖了其下方的项。

我要执行的操作是，当出现全角内容框时，它将向下移动它下面的其他网格项。 我无法覆盖其他任何网格项。 请注意，全角内容框的高度将根据其中的内容长度而变化。

.track-box, .content {
  padding-top: 50px;
  padding-bottom: 50px;
  margin: 5px;
}

.track-content {
  position: absolute;
  left: 0;
  max-width: 100%;
  padding: 20px;
  margin: 10px;
}

https://codepen.io/Finches/pen/XVgxEb

对如何解决这个问题有帮助吗？ 谢谢。

Answer 1

一种解决方案是让您在单击框时在track-box-container div上切换类。 然后，您可以在添加或删除该类时手动设置高度。

看我的codepen

这是最简单的方法，无需更改大量代码。 唯一的问题是高度将需要是静态的而不是柔性的。

希望这可以帮助。

Answer 2

我提出了一个使用内容框动态高度的解决方案...这样，无论内容框中的内容有多小，网格中的项目都将向下移动适当的数量，并且内容将适合内容正确包装。 这需要进行一些改进，但看起来效果很好。

$('.track-box-container').click(function() {

  //Get height of content
  var height = $(this).find('.track-content').height() + 250;

  //Convert height to string
  var heightStr = height.toString();

  //Toggle height and content box display
  if ($(this).height() == 200) {
      $(this).animate({height: heightStr});
      $(this).find('.track-content').show();
    }
    else if ($(this).height() == heightStr) {
      $(this).find('.track-content').hide();
      $(this).animate({height: "200px"});
    }

});

https://codepen.io/Finches/pen/YYQdxz