时间戳

首页 > 解决方案 > Flipcards-only css-grid 无法正确显示

html - Flipcards-only css-grid 无法正确显示

问题描述

我想显示一个充满翻转卡的 css-grid。但是，我发现如果 css-grid 的一行中没有非翻转卡元素，则它无法正确显示：行重叠，background-color不考虑和翻转卡的背面没有出现。

我认为问题与我使用的任何版本都无关，因为我还在 codepen.io 中测试了以下代码，问题仍然存在。

这是我的html：

<section class="grid-1">
  <div class="flip-container item1">
    <div class="flipper">
      <div class="front">
        1 front
      </div>
      <div class="back">
        1 back
      </div>
    </div>
  </div>
  <div class="flip-container item2">
    <div class="flipper">
      <div class="front">
        2 front
      </div>
      <div class="back">
        2 back
      </div>
    </div>
  </div>
  <div class="flip-container item3">
    <div class="flipper">
      <div class="front">
        3 front
      </div>
      <div class="back">
        3 back
      </div>
    </div>
  </div>
</section>

这是我的CSS：

body {
  padding-top: 20px;
  background: #f5f7f8;
}

.grid-1 {
  display: grid;
  padding-left: 20%;
    padding-right: 20%;
    width: 60%;
  
  grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr;
    grid-row-gap: 0.5%;
  grid-template-areas: "item1 item2"
                        "item3 .";
}

.grid-1 div {
  color: white;
  font-size: 20px;
  width: 100%;
  height: 100%;
}

.item1{
  grid-area: item1;
}

.item2{
  grid-area:item2;
}

.item3{
  grid-area: item3;
}

.flip-container {
  background-color: transparent;
}

.flipper {
  position: relative;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-container:hover .flipper {
  transform: rotateY(180deg);
}

.front, .back {
  position: absolute;
  backface-visibility: hidden;
}

.front {
  background-color: #bbb;
  color: black !important;
}

.back {
  background-color: #2980b9;
  color: white;
  transform: rotateY(180deg);
}

如果item1oritem2是一个简单div的而不是 a flip-container，那么一切都会恢复正常，两行不重叠，background-color考虑到并出现翻转卡的背面。

我想知道问题出在哪里，我是一个 css 新手，所以我真的不知道应该从哪里开始搜索。

编辑：

感谢 Paulie_D，我现在知道该怎么做了，答案是以 px 为单位设置高度。但是，我还想要一个响应式网格，我将在其中放置图像。如何设置响应高度element？

标签： htmlcsscss-grid

解决方案

你必须给元素一个高度......因为原始元素100%在父元素具有定义的高度之前不会翻译。

body {
  padding-top: 20px;
  background: #f5f7f8;
}

.grid-1 {
  display: grid;
  padding-left: 20%;
  padding-right: 20%;
  width: 60%;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  grid-row-gap: 0.5%;
  grid-template-areas: "item1 item2" "item3 .";
}

.grid-1 div {
  color: white;
  font-size: 20px;
  width: 100%;
  height: 100px;
}

.item1 {
  grid-area: item1;
}

.item2 {
  grid-area: item2;
}

.item3 {
  grid-area: item3;
}

.flip-container {
  background-color: transparent;
}

.flipper {
  position: relative;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-container:hover .flipper {
  transform: rotateY(180deg);
}

.front,
.back {
  position: absolute;
  backface-visibility: hidden;
}

.front {
  background-color: #bbb;
  color: black !important;
}

.back {
  background-color: #2980b9;
  color: white;
  transform: rotateY(180deg);
}
<section class="grid-1">
  <div class="flip-container item1">
    <div class="flipper">
      <div class="front">
        1 front
      </div>
      <div class="back">
        1 back
      </div>
    </div>
  </div>
  <div class="flip-container item2">
    <div class="flipper">
      <div class="front">
        2 front
      </div>
      <div class="back">
        2 back
      </div>
    </div>
  </div>
  <div class="flip-container item3">
    <div class="flipper">
      <div class="front">
        3 front
      </div>
      <div class="back">
        3 back
      </div>
    </div>
  </div>
</section>

推荐阅读