html - 在 HTML 中对齐多个 CSS 卡片

Question

所以我找到了这个 codepen 我喜欢的。

@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;
}

上面的链接解释了更多使用 flexbox 设置样式的选项。