元素不會保持所需的長寬比

我正在創建記憶遊戲。我想要24張卡片（4行6張卡片）。問題在於DIV元素被放置在一個波紋管彼此之間。我試圖從我的CSS中刪除一些東西，但出於某種原因問題仍然存在。有人可以告訴我爲什麼我的HTML看起來像這樣，並分享建議如何解決它。問候。元素不會保持所需的長寬比

這是我想才達到：

This picture show what I want to have

這是我

This is what I have

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>

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

來源

2014-06-26 user2496520

很好地使用這個jsfiddle http://jsfiddle.net/pVLa7/項目排列你想要的。這是包裹在另一個div，我認爲你有一些js隱藏與他們的圖像項目。 –

「我想實現的」圖形中的'.back'元素在哪裏？ – showdev

與JS我正在申請「翻轉」的div執行transormation @DavidShorthose。 – user2496520

你起碼像丟失：

.flipper { 
    display: inline-block; 
}

（默認情況下，一個div是塊元素，這意味着塊是一個下等）

而且當你張貼問題，請只張貼相關的代碼...

來源

2014-06-26 23:57:19 jcaron

對不相干的代碼感到抱歉。我會嘗試你的解決方案，並會回傳結果。 – user2496520

我會做這樣的boxcard：

width:100%;

，並刪除這一切，再次對boxcard（你重複的代碼 - 不好）：

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/

然後你就可以把什麼你需要在裏面。

來源

2014-06-27 00:03:11 brunofitas

謝謝你的幫助。問題是.back div正在顯示並且佔用太多空間。我將玩你的代碼併發回結果。感謝您的幫助。 – user2496520

也許你會用桌子得到更好的結果。檢查這個小提琴：http：// jsfiddle。net/B7pjw/ – brunofitas

謝謝你的回答。問題是後div被放置在第一個div下面，所以當用戶點擊div時，immage顯示在點擊div下方，因爲後div被放在第一個div下面。 – user2496520

元素不會保持所需的長寬比

回答

相關問題