我在.back上有一个带有Image的多个div,在.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;
}
答案 0 :(得分:1)
给.back位置:绝对。它将被放置在哈希标记div(.front)
之上.back{
position:absolute;
z-index: 2;
transform: rotateY(0deg);
height: 90%;
}