Html Css如何在頁面上正確定位紙牌？

我正在創建一個存儲卡遊戲，並且這些卡似乎沒有正確顯示在頁面上。像這樣：[最終結果圖像] [1]。我使用CSS來簡單地在頁面上放置4張撲克牌：頂部和底部2張牌，但似乎無法找到我做錯了的事情，並且頁腳不顯示在牌下面。任何幫助，將不勝感激......Html Css如何在頁面上正確定位紙牌？

這裏是我的代碼說明： https://jsfiddle.net/ray1234/zeqks3kq/2/

<!DOCTYPE html> 
<html> 
<head> 
    <title>Memory Game</title> 
    <link rel="stylesheet" type="text/css" href="css/main.css" > 
</head> 
<body> 

<nav class="clearfix"> 
    <a href="#">instructions</a> 
    <a href="#">games</a> 
</nav> 

<h1>Memory Game</h1> 
<h2>Instructions</h2> 



<h3>My game is fun to play, you will want to play it again and again. My game is fun because it's easy to play. This game is awesome because of how its built.</h3> 

<p>Concentration, also known as Match Match, Memory, Pelmanism, Shinkei-suijaku, Pexeso or simply Pairs, is a card game in which all of the cards are laid face down on a surface and two cards are flipped face up over each turn. The object of the game is to turn over pairs of matching cards.</p> 

<hr> 

<div class="board"> 
    <div class="card">adf</div> 
    <div class="card">af</div> 
    <div class="card">adsf</div> 
    <div class="card">asdf</div> 
</div> 

<footer> 
    <p>Created with <img src="images/heart.png" width="10px"> by <span class="name">razor</span></p> 
</footer> 

</body> 
</html>

這裏是CSS：

h1 { 
    color: rgb(2, 132, 130); 
    text-align: center; 
} 

h2 { 
    color: #ffd700; 
    text-align: center; 
} 

h3 { 
    text-align: center; 
} 

p { 
    text-align: center; 
} 

.board { 
    height: 80%; 
    width: 50%; 
    display: inline-block; 
    border: 3px solid black; 
    float: left; 
    margin: 8%; 

} 


.card { 
    height: 200px; 
    width: 150px; 
    border: 1px solid black; 
    background-color: yellow; 
    border-radius: 10px; 
    float: left; 
} 


.name { 
    color: #ff0000; 
} 

nav { 
    text-decoration: none; 
    background-color: #808080; 
} 

a { 
    text-decoration: none; 
    background-color: #ffbf00; 
    color: white; 
    padding: 35px; 
    display: block; 
    float: left; 
} 

a:hover { 
    background-color: #ee5f3c; 
} 


.clearfix:after { 
     visibility: hidden; 
     display: block; 
     content: " "; 
     clear: both; 
     height: 0; 
     font-size: 0; 
     } 
footer { 
    text-align: center; 
}

來源

2016-07-12 jay1234

只是fyi，你沒有包含圖片鏈接 – RGA

由於您使用的卡，我會建議您使用兼容的柔性盒most browsers它將處理頁面上的卡片佈局，您可以在網上找到一些簡單的柔性盒教程，我會推薦這個https://css-tricks.com/snippets/css/a-guide-to-flexbox/

這不應該影響您的頁腳，並允許您更輕鬆地定位其餘元素。

希望這可以幫助

來源

2016-07-12 11:47:28 RDardelet

刪除頁腳的浮動並添加清除：兩者代替它。

footer { 
    text-align: center; 
    clear:both; 
}

這將確保頁腳留在卡下面。

來源

2016-07-12 11:48:26 HaukurHaf

這裏是圖片鏈接：http://fundamentals.generalassemb.ly/assets/elkwebdesign/memorygame6.png – jay1234

這裏是圖片鏈接到它應該看起來像：http://fundamentals.generalassemb.ly/assets/elkwebdesign/memorygame6.png – jay1234

謝謝你會試試看。以下是我的代碼的更新版本：https：//jsfiddle.net/ray1234/zeqks3kq/27/ – jay1234

Html Css如何在頁面上正確定位紙牌？

回答

相關問題