Question

我正在创造记忆游戏。我想要24张卡（4行6张卡）。问题是DIV元素彼此相互放置。我试图从我的CSS中删除一些东西，但由于某种原因问题仍然存在。有人可以告诉我为什么我的HTML看起来像这样，并分享如何解决它的建议。问候。

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

This picture show what I want to have

这就是我所拥有的

This is what I have

HTML CODE：

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

CSS代码：

* {
    margin: 0;
    padding: 0;
}
body {
    font: 18px Verdana;
    color: #FFF;
  background: #CCC;
}
#picbox {
    margin: 0px auto;
    width: auto;
}
#boxcard {
/*perspective*/
-webkit-perspective:1000;
   -moz-perspective:1000;
    -ms-perspective:1000;
     -o-perspective:1000;
        perspective:1000;
    display: table;
        margin: 0px auto;
    width: auto;
    z-index: 1;
    display: table;
        margin: 0px auto;
    width: auto;
}

.flipped {
/*transform*/
-webkit-transform:rotateY(180deg);
   -moz-transform:rotateY(180deg);
    -ms-transform:rotateY(180deg);
     -o-transform:rotateY(180deg);
        transform:rotate(180deg);
}
.front, .back{
 float: left;
    width: 100px;
    height: 120px;
    margin: 5px;
    padding: 5px;
    border: 4px solid #EE872A;
    cursor: pointer;
    border-radius: 10px;
    box-shadow: 0 1px 5px rgba(0,0,0,.5);
        z-index:2;
  background: #B1B1B1;
   /*   position:absolute;*/

    /*backface-visibility*/
-webkit-backface-visibility:hidden;
   -moz-backface-visibility:hidden;
    -ms-backface-visibility:hidden;
     -o-backface-visibility:hidden;
        backface-visibility:hidden;

}
/* flip speed goes here */
.flipper {
/*transition*/
-webkit-transition:0.6s;
   -moz-transition:0.6s;
     -o-transition:0.6s;
        transition:0.6s;
/*transform-style*/
-webkit-transform-style:preserve-3d;
   -moz-transform-style:preserve-3d;
    -ms-transform-style:preserve-3d;
     -o-transform-style:preserve-3d;
        transform-style:preserve-3d;
            position:relative;

/*position:relative;*/
}
/* hide back of pane during swap */
/* front pane, placed above back */
/* back, initially hidden pane */
.back{
/*transform*/

-webkit-transform:rotateY(180deg);
   -moz-transform:rotateY(180deg);
    -ms-transform:rotateY(180deg);
     -o-transform:rotateY(180deg);
        transform:rotate(180deg);
    z-index:3;
}
#boxbuttons {
    text-align: center;
    margin: 20px;
    display: block;
}
#boxbuttons .button {
    text-transform: uppercase;
    background: #EE872A;
    padding: 5px 10px;
    margin: 5px;
    border-radius: 10px;
    cursor: pointer;
}
#boxbuttons .button:hover {
    background: #999;
}

Answer 1

你至少缺少类似的东西：

.flipper {
    display: inline-block;
}

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

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

Answer 2

我会在盒子卡上这样做：

width:100%;

然后再次在盒子卡上删除所有这些（你重复代码 - 不好）：

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

添加：

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

然后你必须解决一些身高问题，老实说，我不知道他们来自哪里。也许来自轮换......

在这里查看 http://jsfiddle.net/4bxjN/

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

http://jsfiddle.net/B7pjw/

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

元素不会保持所需的宽高比

2 个答案: