无法让这些旋转立方体并排显示

Question

我在这里找到了旋转立方体的代码，我想用它来在悬停后在正面显示照片，在另一侧显示文本。

<div class='box-scene'>
    <div class='box'>
        <div class='front face'>
            <img src='http://placehold.it/180x180/' alt=''>
        </div>
        <div class="side face">
            <p>This is back</p>
        </div>
    </div>
</div>
<div class='box-scene'>
    <div class='box'>
        <div class='front face'>
            <img src='http://placehold.it/180x180/' alt=''>
        </div>
        <div class="side face">
            <p>This is back</p>
        </div>
    </div>
</div>
.box-scene {
    -webkit-perspective: 700;
    width: 400px;
    height: 200px;
    margin: auto;
    z-index: 999;
}
.box-scene:hover .box {
    -webkit-transform: rotateY(-90deg);
}
.box {
    width: 180px;
    height: 180px;
    position: relative;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: all 0.4s ease-out;
    -webkit-transform-origin: 90px 90px -90px;
    /* float: left; */
    margin: 30px auto;

}
.face {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: visible; 
    -webkit-transform-origin: 0 0;
}
.front {
    -webkit-transform: rotateY(0deg);
    z-index: 2;
    background: #d9d9d9;
}
.side {
    background: #9dcc78;
    -webkit-transform: rotateY(90deg);
    z-index: 1;
    left: 180px;
}

我尝试使用 display：inline，尝试使用引导将它们放在单独的列中，但这两个立方体不会并排排列。谁能提供更多细节，说明他们为什么拒绝排队？

Answer 1

.box-scene css 添加 float： left 并将宽度更改为 49%;