这是 jsFiddle 上的可行 解决方案。
JS：
$('.flip').click(function(){ $(this).find('.card').addClass('flipped'); return false;}).mouseleave(function () { $('.flip > .card').removeClass('flipped');});var frontHeight = $('.front').outerHeight();var backHeight = $('.back').outerHeight();if (frontHeight > backHeight) { $('.flip, .back').height(frontHeight);}else if (frontHeight > backHeight) { $('.flip, .front').height(backHeight);}else { $('.flip').height(backHeight);}定义的高度不灵活，因此您看到的就是定义的高度。由于高度将不会保持恒定，因此前部或后部需要具有定义的高度，以匹配最高的元素。在示例中，
.front较高，因此
.back将其更新为相同的高度，从而使您能够在中心实现垂直翻转效果。
在您的示例中，
mouseleave事件可以在动画期间的元素时触发。我以为您不希望这种情况发生，因此我更新了逻辑以
.flipped在离开卡时删除它，该逻辑将在整个动画过程中保持其高度。我还清理了CSS，以减少冗余。希望这可以帮助！
