div 在 CSS/HTML 底部拆分

Question

我有多个 div，在 .back 中有一个 Image，在 .front 类中有一些文本

但由于某种原因，它总是在底部看起来像这样：

div 在顶部走得更远，但文本在屏幕顶部的 div 上方移动，如下所示：

这只发生在页面的顶部/底部中间，文本框正好显示在 div 的中间。

（别看那些都是从 instagram 上加载的奇怪图片）

HTML：

<div class="flip-container">
 <div class="flipper">
  <div class="front"><p>Some Text</p></div>
  <div class="back"><img src="imgsrc"></div>
 </div>
</div>

CSS：

/*############################## BODY ##############################*/

@media (min-width: 1401px) {
  #bloemfies {
  -moz-column-count:    5;
  -webkit-column-count: 5;
  -ms-column-count:     5;
  column-count:         5;
  }


}
@media (max-width: 1400px) {
  #bloemfies {
  -moz-column-count:    3;
  -webkit-column-count: 3;
  -ms-column-count:     3;
  column-count:         3;
  }

}
@media (max-width: 1000px) {
  #bloemfies {
  -moz-column-count:    2;
  -webkit-column-count: 2;
  -ms-column-count:     2;
  column-count:         2;
  }

}
@media (max-width: 600px) {
  #bloemfies {
  -moz-column-count:    1;
  -webkit-column-count: 1;
  -ms-column-count:     1;
  column-count:         1;
  }
  .back img{
      min-width: 480px;
  }
}

#bloemfies{
   clear: both;
}


/*Container flip*/
/* entire container, keeps perspective */
.flip-container{
  /* Just in case there are inline attributes */
  margin-left: 0.5em;
  margin-right: 0.5em;
  margin-bottom: 1em;
  background-color: rgba(226, 223, 223, 1);
  min-height: 120px;
}
.flip-container, .front, .back {

}

/* flip speed goes here */
.flipper {
        position: relative;
}

/* hide back of pane during swap */
.front, .back {
        backface-visibility: hidden;
        transition: 0.8s;
        transform-style: preserve-3d;
}

/*  UPDATED! front pane, placed above back */
.back {
        z-index: 2;
        transform: rotateY(0deg);
        height: 90%;
}

/* back, initially hidden pane */
.front {
        transform: rotateY(180deg);
        position:absolute;
        overflow: auto;
        word-break: normal;
        height: 89%;
        width: 89%;
        line-height: 1.2;
        color: black;
}

.back img{
        max-width: 90%;
        height: auto;
        margin: 1em;
        overflow: hidden;
}

Answer 1

给出.back 位置：绝对。它将被放置在哈希标签 div (.front) 的上方

.back{
   position:absolute;
   z-index: 2;
   transform: rotateY(0deg);
   height: 90%;
}