css - 让div在正确的位置

Question

我最近在 code canyon 上买了一些代码(我认为它会节省我一些时间)并且大部分都可以工作，但我就是无法正确定位。

基本上，我需要一列中的卡片才能翻转。卡片需要根据其前后内容采用自己的高度，并填充列的宽度。

我似乎无法正确处理的部分是将需要正确翻转的卡片放在彼此下面。

这是我的 JS Fiddle

在行的顶部应该有 2 个独立的盒子，它们应该是可翻转的，后面是 4 行，它们是它应该是什么样子的例子。

肯定是有关系的

position: relative;

在 css 中，但我无法弄清楚我缺少什么。

Answer 1

从 .card-container .card>div 样式中删除 position: absolute; 设置并添加

.card-container .card .back {
    top: 0;
    left: 0;
    position: absolute;
}

你的问题是 position: absolute; 在 .front 和 .back div 上导致容器 div 没有大小.因此，以下容器 div 与前一个容器 div 位于同一点。