在 HTML 中对齐多个 CSS 卡片

Question

所以我找到了我喜欢的这个代码笔。

@import 'https://fonts.googleapis.com/css?family=Lily+Script+One';
body {
background: #eee;
font-family: 'Lily Script One';
}
.card {
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 300px;
margin: -150px;
float: left;
perspective: 500px;
}
.content {
position: absolute;
width: 100%;
height: 100%;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
transition: transform 1s;
transform-style: preserve-3d;
}
.card:hover .content {
transform: rotateY( 180deg);
transition: transform 0.5s;
}
.front,
.back {
position: absolute;
height: 100%;
width: 100%;
background: white;
line-height: 300px;
color: #03446A;
text-align: center;
font-size: 60px;
border-radius: 5px;
backface-visibility: hidden;
}
.back {
background: #03446A;
color: white;
transform: rotateY( 180deg);
}

<div class="card">
<div class="content">
<div class="front">
Front
</div>
<div class="back">
Back!
</div>
</div>
</div>

它的作用是允许我将图像放入盒子内并旋转它以创建动画。我已经把类似交易卡的图像放在里面，一切都很好。

我遇到的问题是我希望有行和列，以便一个人可以用鼠标悬停在所有卡片上，然后它们都会翻转。基本上我不知道如何对齐它们或将它们放入行和列中。此外，当我将它们放在有其他内容(例如文本，图像(并且可滚动的页面上时，它往往会挂在页面顶部并停留在那里。如果有人能帮助我，我将不胜感激！

编辑：这是我修改的版本 https://codepen.io/LC13/pen/PdxLGd

Answer 1

尝试使用 Flexbox。这是一种在行或列中显示内容的灵活方式。

您需要一个容器元素来封装所有卡片。将其宽度设置为100%和display: flex;。此外，您需要从卡片中删除绝对定位等，以便它们正确对齐。

此示例代码演示如何显示三张卡片：

.HTML：

<div class="container">
<div class="sscards">
<div class="sscontents">
<div class="sscardfront">
</div>
<div class="sscardback">
</div>
</div>
</div>
<div class="sscards">
<div class="sscontents">
<div class="sscardfront">
</div>
<div class="sscardback">
</div>
</div>
</div>
<div class="sscards">
<div class="sscontents">
<div class="sscardfront">
</div>
<div class="sscardback">
</div>
</div>
</div>
</div>

.CSS：

.container {
width: 100%;
display: flex;
}
.sscards {
position: relative;
width: 300px;
height: 300px;
perspective: 500px;
}

上面的链接解释了使用弹性框设置布局样式的更多选项。