删除一项内的内容时在行上方创建神秘空间

我有一个包含一些项目的网格，当我单击任何项​​目时，我会将该项目的内容移动到模式中。

该模式效果很好，但是当我从项目中删除内容时，项目上方会出现一个空格。

我知道解决这个问题的方法可能是使用弹性盒，它工作得很好，但我想了解这里发生了什么。

这里可能很关键的是每个项目都有 3 个子项目。

I use position: absolute其中两个，另一个保持默认位置。

如果我使用position: absolute对于所有的孩子来说，这个问题都已经解决了。

有什么不同？

当我点击该项目时，内容消失，那么结果如何会根据内容而不同？

这是一个JSFiddle https://jsfiddle.net/dangonrei/67w721zq/显示问题。

基本上，结构如下：

HTML

<div class="context">
    <div class="grid">
        <div class="item">
            <div class="cover">  // has position: absolute
                <h1>Title</h1>
            </div>
            <div class="img-wrapper">  // has position: absolute
                <img/>
            </div>
            <div class="description">  // doesn't have a position defined
                <p>Description...</p>
            </div>
        <div class="item">
            // item content
        </div>
    </div>
</div>

我总共有 8 件物品，分成两排，每排 4 件。

CSS

实现这一点的 CSS 如下：

.grid {
  margin-top: 100px;
  font-size: 0; // to get all the items together
  border: 1px solid red;
}

.item {
  width: calc(100% / 4);
  height: 100px;
  position: relative;
  display: inline-flex;
}

.description {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  top: 0;
  bottom: 0;
}

.img-wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

img {
  height: 100%;
  width: auto;
  display: block;
  margin: auto;
}

.cover {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

Note：JSfiddle示例有更多的CSS用于样式，但基础是相同的，上面的代码仍然出现问题。

JavaScript

最后，将内容移动到模态div的JS如下：

let $itemNode;
let $itemContent;

$().ready(args => {
  // Cache the modal node
  let $modal = $('#modal');

  $('.item').click(function() {
    // First cache the item and content
    // to put it back when needed
    $itemNode = $(this);
    $itemContent = $(this).children();

    // Hides the item
    $itemNode.css({visibility: 'hidden'});

    // Transfer project content to the modal
    $itemContent.appendTo($modal);
  });

});

解决方案

我知道解决这个问题的方法可能是使用弹性盒......

那是对的。将项目的父级设置为弹性容器可以解决问题：

.grid {
  display: flex;     /* new */
  flex-wrap: wrap;   /* new */
  margin-top: 100px;
  font-size: 0;
  border: 1px solid red;
}

修改后的小提琴 https://jsfiddle.net/67w721zq/2/

这里可能很关键的是每个项目都有 3 个子项目。我用position: absolute其中两个，另一个保持默认位置。如果我使用position: absolute对于所有的孩子来说，这个问题都已经解决了。

另外，正确。通过从文档的正常流程中删除第三个 div，问题就得到了解决。

解释

在涉及任何脚本和删除项目之前，网格中的每个项目都是人为定位的。

换句话说，在初始状态下，项目的内容（三个子 div）将每个项目移动到原本不会出现的位置。但是当脚本删除这些子 div 时，每个项目都会移动到它应该在的位置。

正如您所怀疑的，问题出在每个网格项的第三个子 div (.description).

如果您只是申请visibility: hidden到网格项 –不删除子 div– 布局不会被破坏。

但对于你的脚本，你不仅仅是添加visibility: hidden，您还要删除子 div。

前两个 div (.cover and .img-wrapper）永远不会造成问题。它们是绝对定位的，因此它们已经从正常流程中移除。

然而，第三个 div (.description) 是一个流入子代。

这个div包含两个p儿童（“该项目 X 的​​说明”和“更多信息”）。当这些孩子中的任何一个被移除时，那就是布局中断的时候.

这是因为——出于我尚未确定的原因——这个 div 正在抑制vertical-align: baseline在父级上，这是一个内联级元素，因此，明白了vertical-align默认设置 https://www.w3.org/TR/CSS22/visudet.html#line-height.

当脚本删除 div 时，基线对齐方式将恢复到父级，将其向上移动，从而创建间隙。

EDIT:

As @Kukkuz 提到了一个答案 https://stackoverflow.com/a/39794921/3597276，使用除baseline for vertical-align也解决了问题。