jquery - Div 在底部 CSS/HTML 拆分

Question

我有多个 div，在 .back 类中有一个图像，在 .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

给.backposition:absolute。它将被放置在散列标签 div (.front) 之上

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