0
メモリカードゲームを作成していて、カードがページに正しく表示されていないようです。このように：[最終結果の画像] [1]。私はCSSを使用してページに4枚のトランプカードを配置しています：上下2枚のカードですが、間違ったことを見つけることができず、フッターがカードの下に表示されません。 https://jsfiddle.net/ray1234/zeqks3kq/2/Html Cssどのようにカード上のカードを正しく配置する？
<!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;
}
画像リンクは含まれていません – RGA