Diese rotierenden Würfel können nicht nebeneinander angezeigt werden

Question

Ich habe den Code here zu rotierenden Würfeln gefunden, die ich verwenden wollte, um ein Foto auf der Vorderseite anzuzeigen und den Text auf dem anderen, der einmal überlagert war.

<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; 
} 

Ich habe versucht, mit display: inline, haben versucht, sie in separaten Spalten mit Bootstrap setzen, doch diese beiden Würfel werden nicht nebeneinander in einer Reihe aufstellen. Könnte jemand mehr Details darüber liefern, warum sie sich weigern, sich anzustellen?

Answer 1

.box-scene css float hinzufügen: links und Breite auf 49% ändern;