Question

我试图翻转div / box，效果很好。但问题是背面的高度。因为它高于正面的高度。所以翻转div总是向下推到下一个元素（例如：Container2）。并且在翻转div和下一个元素之间总是有空格。

此外，当我在IE上运行此代码时，它会翻转div但不显示正确的内容。只需在IE和Chrome中试用我的演示。你会发现这个问题。

我也附上了图片。我希望他们能帮助理解这个问题。

First State希望从内容和容器2 管理此高度/空间

点击修改链接后的第二个州

我希望我已经解释得足够多了。

谢谢...

demo code

HTML

<br>
<br>
<br>
<br>
<div class="container">
<div class="flip">
    <div class="moveOnchange card">
        <div class="face front bgGrey">
            <div class=" portlet portletTodelete  ">
                <div class="portlet-header"> <span class="  "> Front   Side         </span>

                    <div class="dropdown pull-right "> 

                        <span class="pull-right ">
                        <span class="flipControl" >Edit <span    class="glyphicon glyphicon-pencil pull-right flipLink"> </span> </span>
                        </span>
                    </div>
                    <!-- portlet-content -->
                </div>
                <!-- portlet-header -->
            </div>
            <div class="portlet-content">content</div>
            <!-- portlet- -->
        </div>
        <!-- moveOnchange-->
         <div class="face back">
            <div class="inner">
                <div class="portlet">
                    <div class="flipForm bgGrey">          Back Side
                        <ul class="list-inline pull-right ">
                            <li class="flipControl"> <span class="pull-    right glyphicon glyphicon-floppy-disk gi-1x opacity7 "></span>

                            </li>
                        </ul>
                        <hr class="hrflipForm">
                    </div>
                    <!-- Header Closed -->
                    <div class="portlet-content">
                        <br>text
                        <br>text
                        <br>text
                        <br>text
                        <br>text
                        <br>text
                        <br>text
                        <br>text
                        <br>text
                        <br>text
                        <br>text
                        <br>text</div>
                    <!--- Portlet content -->
                </div>
            </div>
        </div>
    </div>
    </div>
    <div class="container2 container border">container 2</div>
</div>

CSS

.flipForm {
    padding:5px;
}

.bgGrey {
    background: #efefef;
}

.portlet {
    border:solid 1px red;
    padding: 10px;
}

.portlet-header {
    padding: 0.2em 0.3em;
    /*margin-bottom: 0.5em;*/
    position: relative;
}

.portlet-content {
    border:blue 1px solid;
    padding: 0.4em;
}

.portlet-placeholder {
    border: 1px dotted black;
    margin: 0 0 10px 0;
    height: 50px;
}



/************* Flip and show Form. ************/

.flip {
    -webkit-perspective: 800;
    perspective: 800;
    position: relative;

}

.flip .card.flipped {
    -webkit-transform: rotatey(-180deg);

    transform: rotatey(-180deg);

}

.flip .card {
    -webkit-transform-style: preserve-3d;
    -webkit-transition: 0.5s;
    transform-style: preserve-3d;
    transition: 0.5s;
}

.flip .card .face {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 2;
    height: 100%;

}

.flip .card .front {
    position: absolute;
    width: 100%;
    z-index: 1;
    height: auto;
}

.flip .card .back {
    height: auto;
    -webkit-transform: rotatey(-180deg);
    transform: rotatey(-180deg);
}

.inner {
    height: auto !important;
    margin: 0px !important;
}

.container2 {
    border:solid 1px green;
    height:50px;
    padding:5px;
}

Answer 1

设置min-height和margin-bottom。 http://jsfiddle.net/9w26kzc6/6/

.portlet-content {
    border:blue 1px solid;
    padding: 0.4em;
    min-height: 400px;
}
.flip {
    -webkit-perspective: 800;
    perspective: 800;
    position: relative;
    min-height: 450px;
    margin-bottom: 30px;
}

并添加：

.flip .card .face {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 2;
    height: 100%;
-ms-backface-visibility: hidden;
-moz-backface-visibility: hidden;
}

并添加背景颜色：

.flip .card .back {
    height: auto;
    -webkit-transform: rotatey(-180deg);
    transform: rotatey(-180deg);
    background-color: #fff;
}

Answer 2

我不确定这会有效，但我认为它会：

的CSS：

        .flipForm {
        padding:5px;
    }

    .bgGrey {
        background: #efefef;
    }

    .portlet {
        border:solid 1px red;
        padding: 5px;
    }

.portlet-header {
        padding: 0.2em 0.3em;
        /*margin-bottom: 0.5em;*/
        position: relative;
    }

    .portlet-content {
        border:blue 1px solid;
        padding: 0.4em;
    }

    .portlet-placeholder {
        border: 1px dotted black;
        margin: 0 0 10px 0;
        height: 50px;
    }



    /************* Flip and show Form. ************/

    .flip {
        -webkit-perspective: 800;
        perspective: 800;
        position: relative;

    }

    .flip .card.flipped {
        -webkit-transform: rotatey(-180deg);

        transform: rotatey(-180deg);

    }

    .flip .card {
        -webkit-transform-style: preserve-3d;
        -webkit-transition: 0.5s;
        transform-style: preserve-3d;
        transition: 0.5s;
    }

    .flip .card .face {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        z-index: 2;
        height: 100%;

    }

    .flip .card .front {
        position: absolute;
        width: 100%;
        z-index: 1;
        height: auto;
    }

    .flip .card .back {
        height: auto;
        -webkit-transform: rotatey(-180deg);
        transform: rotatey(-180deg);
    }

    .inner {
        height: auto !important;
        margin: 0px !important;
    }

    .container2 {
        border:solid 1px green;
        height:35px;
        padding:5px;
    }

PLease see my demo page

DEMO

翻盖背面的高度，也不适用于IE

2 个答案: