我正在嘗試制作一個(gè)需要學(xué)生個(gè)人資料的網(wǎng)站。top 屬性不適用于圖像容器。我曾多次嘗試更改該值，但不起作用。即使將其應(yīng)用到圖像本身也不起作用。任何幫助將不勝感激。.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>
1 回答
繁星淼淼
TA貢獻(xiàn)1775條經(jīng)驗(yàn) 獲得超11個(gè)贊
如果我理解正確的話你需要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>
- 1 回答
- 0 關(guān)注
- 105 瀏覽
添加回答
舉報(bào)
0/150
提交
取消