我正在尝试制作一个需要学生个人资料的网站。top 属性不适用于图像容器。我曾多次尝试更改该值，但不起作用。即使将其应用到图像本身也不起作用。任何帮助将不胜感激。
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
margin: auto;
text-align: center;
font-family: arial;
background-color: white;
}
.card .img-container {
position: relative;
width: 90%;
left: 5%;
height: 45%;
top: 10%;
}
.card .img-container img {
width: 100%;
position: relative;
}
.card p {
color: #000;
font-size: 18px;
}
.card .name {
font-weight: 700;
}
.card table {
width: 90%;
left: 5%;
text-align: center;
position: relative;
border-spacing: 10px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="main">
<div class="card">
<div class="img-container"><img src="https://cdn.iconscout.com/icon/premium/png-256-thumb/circle-270-1156833.png"></div>
<p class="name">Name</p>
<p>Total Bands</p>
<table>
<tr>
<td>Reading: </td><td>Speaking: </td>
</tr>
<tr>
<td>Listening: </td><td>Writing: </td>
</tr>
</table>
<br><br>
</div>
</div>
</body>
</html>
繁星淼淼
相关分类