CSS top 不适用于图像及其容器
我正在尝试制作一个需要学生个人资料的网站。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>
慕丝72912551回答
-
繁星淼淼
如果我理解正确的话你需要padding-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%; padding-top: 5%;}.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>
随时随地看视频慕课网APP
相关分类
Html5