由于绝对元素，div在css翻转动画之后div没有正确浮动

Question

我一直在尝试使用网络上的一些教程创建css翻转动画。 大多数教程仅讨论元素高度已知的情况。 例如，在本教程中http://davidwalsh.name/css-flip翻转容器的高度，正面和背面设置为480px。

.flip-container, .front, .back {
   width: 320px;
    height: 480px;
}

如果我在翻转容器后添加任何div，它应该遵循正常的文档流程并在翻转容器后浮动。 但是，如果我不知道前后元素的大小，或者说我希望它根据内容动态扩展，那么我就会遇到问题。 因为制作.front和。 返回“绝对”使他们脱离文档流。

http://jsfiddle.net/zk81h12u/4/

<div class="flip-container ">
   ....
</div
<div class="icon-container">
  icon
</div>

关于如何在翻转容器之后正确浮动“icon-container”的任何想法。 现在它只是在翻盖容器的顶部“。

Answer 1

从你展示的例子中， .front和.back总是有相同的高度，对吗？ 即使它是动态的。 所以，你可以使用position: absolute; 只在后面的元素。

.back {
  position: absolute;
  top: 0;
}

您可以删除这些属性，在这种情况下，“后退”部分将覆盖内容，但它仍然可以正常工作。

---

我创建了一个更详细的版本，并对代码进行了全面改进，看看：

 .flip-container, .flip-container .front, .flip-container .back { backface-visibility: hidden; height: 100%; min-width: 320px; position: relative; } .flip-container { overflow: hidden; perspective: 1000; position: relative; } .flip-container:hover .flipper, .flip-container.active .flipper { transform: rotateY(180deg); } .flip-container .flipper { transition: 0.6s; transform-style: preserve-3d; } .flip-container .front, .flip-container .back { background-color: white; border: 1em solid #61AE24; border-radius: 6px; box-sizing: border-box; min-height: 150px; } .flip-container .front { transform: rotateY(0deg); z-index: 2; } .flip-container .back { top: 0; transform: rotateY(180deg); position: absolute; } 

 <div class="flip-container"> <div class="flipper"> <div class="front"> Hello! I'm on the front part. </div> <div class="back"> CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's content on both the front and back of a given container. This tutorial will show you show to create that effect in as simple a manner as possible. </div> </div> </div> <div> Content flow. </div> 

---

否则，您可以考虑使用JavaScript。

 var flipContainer, flipContainerBack, flipContainerFront; flipContainer = document.querySelector('.flip-container'); flipContainerFront = document.querySelector('.flip-container .front'); flipContainerBack = document.querySelector('.flip-container .back'); function setFlipContainerFrontHeight() { flipContainer.style.height = flipContainerFront.offsetHeight + 'px'; }; function setFlipContainerBackHeight() { flipContainer.style.height = flipContainerBack.offsetHeight + 'px'; }; setFlipContainerFrontHeight(); flipContainer.onmouseover = setFlipContainerBackHeight; flipContainer.onmouseout = setFlipContainerFrontHeight; 

 .flip-container, .flip-container .front, .flip-container .back { backface-visibility: hidden; min-width: 320px; position: relative; } .flip-container { perspective: 1000; -ms-transition: height 0.6s; -moz-transition: height 0.6s; -o-transition: height 0.6s; -webkit-transition: height 0.6s; transition: height 0.6s; } .flip-container:hover .flipper, .flip-container.active .flipper { transform: rotateY(180deg); } .flip-container .flipper { transition: 0.6s; transform-style: preserve-3d; } .flip-container .front, .flip-container .back { background-color: white; border: 1em solid #61AE24; border-radius: 6px; box-sizing: border-box; } .flip-container .front { transform: rotateY(0deg); z-index: 2; } .flip-container .back { top: 0; transform: rotateY(180deg); position: absolute; } 

 <div class="flip-container"> <div class="flipper"> <div class="front"> Hello! I'm on the front part. </div> <div class="back"> CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's content on both the front and back of a given container. This tutorial will show you show to create that effect in as simple a manner as possible. </div> </div> </div> <div> Content flow. </div>