Divs исчезают при использовании inline-block - PullRequest
Новая
       21

Divs исчезают при использовании inline-block

0 голосов
/ 24 августа 2018

Попытка создать адаптивную галерею флип-карт с помощью кода, с которым я столкнулся здесь. Все работает отлично, за исключением того, что когда я пытаюсь расположить флип-карты рядом друг с другом (пытаясь создать три карты в ряду), они просто исчезают. Я пытался использовать 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);
}

1 Ответ

0 голосов
/ 24 августа 2018

Я попробовал ваш код в 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;

}
...