jquery - 具有 4 列（屏幕的所有宽度）和 2 行应用翻转效果 jquery 的表格

Question

我正在研究使用 jquery 翻转卡片的效果，目前我有：

但我想创建一种矩阵 4columns 和 2 行，如下所示：

这里的问题是我不知道如何让这个矩阵占据屏幕的所有宽度（任何屏幕中的任何类型的宽度），所以我width = 100%在表格布局中制作了：

#wrapper {
    display: table;
    table-layout: fixed;    
    width:100%;
}
#wrapper div {
    display: table-cell;
}

占据所有宽度。

但是我怎么能保证图像就像想要的图像一样占据所有宽度呢？另外我不知道如何制作第二排...？

你能帮我得到想要的输出吗？这是我到目前为止在这个小提琴中所拥有的，

Answer 1

刚刚设置width:25%在.card-container

参见 JSFiddle

这是我所做的更改：

section.card-container{
    float: left;
    margin:0;
    width:25%;
}

/*#wrapper {
    display: table;
    table-layout: fixed;    
    width:100%;
}
#wrapper div {
    display: table-cell;
}*/

添加另一行就像复制元素一样简单

参见 JSFiddle