Html 元素赢得'；t保持所需的纵横比

我正在制作记忆游戏。我想要24张卡片（4行6张）。问题是DIV元素被放置在彼此的下面。我试图从CSS中删除一些东西，但由于某种原因，问题仍然存在。有人能告诉我为什么我的html看起来像这样，并分享如何修复它的建议吗。问候

这就是我想要实现的目标：

这就是我所拥有的

HTML代码：

<div id="picbox">
   <span id="boxbuttons">
   <span class="button" id="rezz">
   Rezultat
   <span id="counter">0</span>
   </span>
   <span class="button" id="ttime">00 : 14</span>
   <span class="button">
   <a onclick="ResetGame();">Reset</a>
   </span> 
   <span class="button">
   <a onclick="MutedSound();">Mute sound</a>
   </span> 
   </span>
   <div id="boxcard" align="center">
      <div class="flipper" id="flipper10">
         <div class="front"></div>
         <div class="back"><img src="http://img5.uploadhouse.com/fileuploads/17699/176992640c06707c66a5c0b08a2549c69745dc2c.png"></div>
      </div>
      <div class="flipper" id="flipper11">
         <div class="front"></div>
         <div class="back"><img src="http://icons.iconarchive.com/icons/reclusekc/kulo/96/Skull-1-icon.png"></div>
      </div>
      <div class="flipper" id="flipper12">
         <div class="front"></div>
         <div class="back"><img src="http://img6.uploadhouse.com/fileuploads/17699/17699263b01721074bf094aa3bc695aa19c8d573.png"></div>
      </div>
      <div class="flipper" id="flipper13">
         <div class="front"></div>
         <div class="back"><img src="http://img3.uploadhouse.com/fileuploads/17699/17699259cb2d70c6882adc285ab8d519658b5dd7.png"></div>
      </div>
      <div class="flipper" id="flipper14">
         <div class="front"></div>
         <div class="back"><img src="http://img3.uploadhouse.com/fileuploads/17699/17699259cb2d70c6882adc285ab8d519658b5dd7.png"></div>
      </div>
      <div class="flipper" id="flipper15">
         <div class="front"></div>
         <div class="back"><img src="http://img4.uploadhouse.com/fileuploads/17699/176992601ca0f28ba4a8f7b41f99ee026d7aaed8.png"></div>
      </div>
      <div class="flipper" id="flipper16">
         <div class="front"></div>
         <div class="back"><img src="http://img9.uploadhouse.com/fileuploads/17699/176992554c2ca340cc2ea8c0606ecd320824756e.png"></div>
      </div>
      <div class="flipper" id="flipper17">
         <div class="front"></div>
         <div class="back"><img src="http://img2.uploadhouse.com/fileuploads/17699/1769925824ea93cbb77ba9e95c1a4cec7f89b80c.png"></div>
      </div>
      <div class="flipper" id="flipper18">
         <div class="front"></div>
         <div class="back"><img src="http://img9.uploadhouse.com/fileuploads/17699/176992568b759acd78f7cbe98b6e4a7baa90e717.png"></div>
      </div>
      <div class="flipper" id="flipper19">
         <div class="front"></div>
         <div class="back"><img src="http://img9.uploadhouse.com/fileuploads/17699/176992568b759acd78f7cbe98b6e4a7baa90e717.png"></div>
      </div>
      <div class="flipper" id="flipper110">
         <div class="front"></div>
         <div class="back"><img src="http://icons.iconarchive.com/icons/martin-berube/sport/96/Volleyball-icon.png"></div>
      </div>
      <div class="flipper" id="flipper111">
         <div class="front"></div>
         <div class="back"><img src="http://img4.uploadhouse.com/fileuploads/17699/176992601ca0f28ba4a8f7b41f99ee026d7aaed8.png"></div>
      </div>
      <div class="flipper" id="flipper20">
         <div class="front"></div>
         <div class="back"><img src="http://img6.uploadhouse.com/fileuploads/17699/17699263b01721074bf094aa3bc695aa19c8d573.png"></div>
      </div>
      <div class="flipper" id="flipper21">
         <div class="front"></div>
         <div class="back"><img src="http://img9.uploadhouse.com/fileuploads/17699/176992554c2ca340cc2ea8c0606ecd320824756e.png"></div>
      </div>
      <div class="flipper" id="flipper22">
         <div class="front"></div>
         <div class="back"><img src="http://img9.uploadhouse.com/fileuploads/17699/176992615db99bb0fd652a2e6041388b2839a634.png"></div>
      </div>
      <div class="flipper" id="flipper23">
         <div class="front"></div>
         <div class="back"><img src="http://img5.uploadhouse.com/fileuploads/17699/176992640c06707c66a5c0b08a2549c69745dc2c.png"></div>
      </div>
      <div class="flipper" id="flipper24">
         <div class="front"></div>
         <div class="back"><img src="http://icons.iconarchive.com/icons/martin-berube/sport/96/Volleyball-icon.png"></div>
      </div>
      <div class="flipper" id="flipper25">
         <div class="front"></div>
         <div class="back"><img src="http://img9.uploadhouse.com/fileuploads/17699/176992615db99bb0fd652a2e6041388b2839a634.png"></div>
      </div>
      <div class="flipper" id="flipper26">
         <div class="front"></div>
         <div class="back"><img src="http://img7.uploadhouse.com/fileuploads/17699/1769925708af4fb3c954b1d856da1f4d4dcd548a.png"></div>
      </div>
      <div class="flipper" id="flipper27">
         <div class="front"></div>
         <div class="back"><img src="http://icons.iconarchive.com/icons/reclusekc/kulo/96/Skull-1-icon.png"></div>
      </div>
      <div class="flipper" id="flipper28">
         <div class="front"></div>
         <div class="back"><img src="http://img7.uploadhouse.com/fileuploads/17699/1769925708af4fb3c954b1d856da1f4d4dcd548a.png"></div>
      </div>
      <div class="flipper" id="flipper29">
         <div class="front"></div>
         <div class="back"><img src="http://img6.uploadhouse.com/fileuploads/17699/17699262833250fa3063b708c41042005fda437d.png"></div>
      </div>
      <div class="flipper" id="flipper210">
         <div class="front"></div>
         <div class="back"><img src="http://img2.uploadhouse.com/fileuploads/17699/1769925824ea93cbb77ba9e95c1a4cec7f89b80c.png"></div>
      </div>
      <div class="flipper" id="flipper211">
         <div class="front"></div>
         <div class="back"><img src="http://img6.uploadhouse.com/fileuploads/17699/17699262833250fa3063b708c41042005fda437d.png"></div>
      </div>
   </div>
</div>

---

您至少缺少了以下内容：

.flipper {
    display: inline-block;
}

（默认情况下，div是一个块元素，这意味着块是一个低于另一个的）

---

另外，当您发布问题时，请仅发布相关代码…

我会在boxcard上这样做：

width:100%;

然后删除所有这些，同样是在boxcard上（您重复代码——不好）：

添加以下内容：

#boxcard div{
    float:left;
    margin:5px
}

然后你必须解决一些身高问题，老实说，我不知道这些问题是从哪里来的。也许是因为轮换

在这里检查

但如果你想听听我的意见，我会在这种情况下使用一个表格：

---

然后你可以把你需要的东西放在里面。

好吧，使用这个JSFIDLE，物品会按照你的意愿排列。这是否被包装在另一个div中，我假设您有一些js来隐藏带有图像的项目。您的“我想要实现什么”图形中的

.back

元素在哪里？使用js，我正在应用执行转换@davidshortehether的“翻转”div。@showdev.back元素保存显示后的图像。翻转。由JS添加。翻转执行旋转并显示背面图像。抱歉输入相关代码。我将尝试您的解决方案并将结果发回。谢谢您的帮助。问题是，后面的节目正在播放，占用了太多的空间。我将使用您的代码并发回结果。谢谢你的帮助。也许你用桌子会得到更好的结果。检查这把小提琴：谢谢你的回答。问题是back div放在第一个div的下面，所以当用户单击div时，image显示在clicked div的下面，因为back div放在第一个div的下面。

display: table;
margin: 0px auto;
width: auto;
z-index: 1;
display: table;
margin: 0px auto;
width: auto;

#boxcard div{
    float:left;
    margin:5px
}