让divs处于正确的位置

Question

我最近在代码峡谷上购买了一些代码（我认为这样可以节省一些时间）并且大部分都可以使用，但我无法正确定位。

基本上我需要一个列中的卡才能翻转。卡片需要根据它的背部和背部来承担它自己的高度。前面的内容，也填充列的宽度。

我似乎无法正确使用的部分是需要正确翻转的卡片。

这是我的JS Fiddle

在行的顶部应该是2个单独的盒子，它们应该是可翻转的，然后是4行，这些是它应该看起来的例子。

我确信它与

有关

position: relative;

在css中，但我无法弄清楚我错过了什么。

Answer 1

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

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

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