html - 使用内联 block 时 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;

}