使用嵌入式块时，div消失

Question

尝试使用我在这里遇到的代码创建响应式翻页式图片库。 一切工作都很好，除了当我尝试将翻转卡片彼此对齐（尝试每行创建三张卡片）然后它们消失时。 我试过使用display：inline-block和flex-grid，但无法弄清楚我要去哪里。

谢谢！

这是初始代码：

HTML

     <div class="container">
<div class="card-container">
    <div class="row">
        <div class="col">
            <div class="flip-container">
                <div class="flipper">
                    <div class="front">
                        <div class="inner"><img src="image1.jpg" style="height: 100%;"></div>
                    </div>
                    <div class="back">
                        <div class="inner">Back</div>
                    </div>
                </div>
            </div>
        </div>

    </div>



<div class="card-container">
    <div class="row">
        <div class="col">
            <div class="flip-container">
                <div class="flipper">
                    <div class="front">
                        <div class="inner"><img src="metalcard.jpg" style="height: 100%;"></div>
                    </div>
                    <div class="back">
                        <div class="inner">Back</div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
</div>


<div class="card-container">
    <div class="row">
        <div class="col">
            <div class="flip-container">
                <div class="flipper">
                    <div class="front">
                        <div class="inner"><img src="image3.jpg" style="height: 100%;"></div>
                    </div>
                    <div class="back">
                        <div class="inner">Back</div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
</div>
</div>

CSS：

.container {
   margin: 0 auto;
    max-width: 1200px;
    padding: 0 1rem;
    display: inline-block;

}

.card-container{
    width: 25%; /* Adjust the target width*/

}
.flip-container {
    position: relative;
    perspective: 1000px;



}

    /* flip the pane when hovered */
    .flip-container:hover .flipper, .flip-container.hover .flipper {
        transform: rotateY(180deg);
    }

.flip-container, .front, {
    width: 100%;
  height: 170px;
}

.flip-container,.back {

      height: 190px;
    width: 100%;

    }



.flipper {
    transition: 0.9s;
    transform-style: preserve-3d;
    position: relative;
}

.front, .back {

    backface-visibility: hidden;

    position: absolute;
    top: 0;
    left: 0;
}

.front {
    background: rgba(0,0,0,0.05);
  z-index: 2;
    /* for firefox 31 */
    transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
      background: #00ccff;

    transform: rotateY(180deg);
}

Answer 1

我在jsfiddle中尝试了您的代码，但它们是html代码缺失的一部分，并且我修复了类.container和.card-container

干得好

HTML

<div class="container">
<div class="card-container">
    <div class="row">
        <div class="col">
            <div class="flip-container">
                <div class="flipper">
                    <div class="front">
                        <div class="inner"><img src="image1.jpg" style="height: 100%;"> </div>
                    </div>
                    <div class="back">
                        <div class="inner">Back</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="card-container">
    <div class="row">
        <div class="col">
            <div class="flip-container">
                <div class="flipper">
                    <div class="front">
                        <div class="inner"><img src="metalcard.jpg" style="height: 100%;"></div>
                    </div>
                    <div class="back">
                        <div class="inner">Back</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="card-container">
    <div class="row">
        <div class="col">
            <div class="flip-container">
                <div class="flipper">
                    <div class="front">
                        <div class="inner"><img src="image3.jpg" style="height: 100%;"></div>
                    </div>
                    <div class="back">
                        <div class="inner">Back</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.container {
   width: 100%;

}

.card-container{
    width: 25%; /* Adjust the target width*/
    display: inline-block;

}