【发布时间】：2022-10-07 21:09:48
【问题描述】：
如何在我的项目中分离卡片，我是 html 新手，仍在学习，所以我不知道如何做到这一点，我不喜欢卡片彼此相邻的方式。有什么办法可以解决这个问题，谢谢大家的帮助！在弄清楚这一点之前，我无法继续我的项目。 :(
这是我的代码 我不知道该怎么做才能解决我的问题
<!DOCTYPE html>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.shell {
height:65vh;
justify-content: center;
display: flex;
flex-direction: row;
flex-basis: auto;
margin: 5px 20px;
align-items: center; /* Added */
flex-wrap:wrap;
}
.gameshell{
height:65vh;
justify-content: center;
display: flex;
flex-direction: row;
flex-basis: auto;
margin: 5px 20px;
align-items: center; /* Added */
flex-wrap:wrap;
}
.card {
display: inline-block;
width: 200px;
height: 160px;
border: 1px solid #EF9A9A;
border-radius: 4px;
margin: 5px;
text-decoration: none;
}
.card-header {
color: #D32F2F;
text-align: center;
font-size: 24px;
font-weight: 600;
border-bottom: 1px solid #EF9A9A;
background-color: #FFEBEE;
padding: 5px 10px;
}
.card-main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 15px 0;
}
.material-icons {
font-size: 36px!Important;
color: #D32F2F;
margin-bottom: 5px;
}
.main-description {
color: #D32F2F;
font-size: 24px;
text-align: center;
}
.header {
overflow: hidden;
background-color: #FFEBEE;
padding: 20px 10px;
border-bottom: 1px solid #EF9A9A;
border-radius: 4px;
}
.header a {
float: left;
color: #D32F2F;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header a.logo {
font-size: 25px;
font-weight: bold;
}
.header a:hover {
background-color: #dfd5d7;
color: #942626;
}
.header a.active {
background-color: #D32F2F;
color: #FFEBEE;
}
.header-right {
float: right;
}
@media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
</style>
<!DOCTYPE html>
<!DOCTYPE html>
<head>
<link rel="icon" type="png" href="/images/icon.png"/>
<meta charset="utf-8"/>
<title>Project-LuLo</title>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="header">
<a href="#home" class="logo">Project-LuLo</a>
<div class="header-right">
<a class="active" href="#home">Home</a>
<a href="#games">Games</a>
<a href="#contact">Contact</a>
</div>
</div>
<div class="gameshell">
<a href="#test"class="card">
<div class="card-header">place_holder</div>
<div class="card-main">
<i class="material-icons">null</i>
<div class="main-description">place_holder</div>
</div>
</a>
<a href="#test"class="card">
<div class="card-header">place_holder</div>
<div class="card-main">
<i class="material-icons">null</i>
<div class="main-description">place_holder</div>
</div>
</a>
<a href="#test"class="card">
<div class="card-header">place_holder</div>
<div class="card-main">
<i class="material-icons">null</i>
<div class="main-description">place_holder</div>
</div>
</a>
<a href="#test"class="card">
<div class="card-header">place_holder</div>
<div class="card-main">
<i class="material-icons">null</i>
<div class="main-description">place_holder</div>
</div>
</a>
<a href="#test"class="card">
<div class="card-header">place_holder</div>
<div class="card-main">
<i class="material-icons">null</i>
<div class="main-description">place_holder</div>
</div>
</a>
<a href="#test"class="card">
<div class="card-header">place_holder</div>
<div class="card-main">
<i class="material-icons">null</i>
<div class="main-description">place_holder</div>
</div>
</a>
</div>
</body>
</html>
【问题讨论】：