将照片缩小,志愿情况另起一行
时间: 2024-09-15 11:14:59 浏览: 37
如果你想让照片和志愿情况分别占据两行,并且照片缩放到合适的大小,你可以对HTML结构稍作调整,同时结合CSS来控制布局。这里有一个修改后的示例:
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>个人主页</title>
<style>
.profile {
display: flex;
flex-wrap: wrap; /* 添加此行允许元素跨行 */
}
.avatar-container {
flex-basis: calc(50% - 20px); /* 缩小到50%,减去间距 */
margin-bottom: 20px;
}
.avatar {
width: 100%;
height: auto; /* 自适应高度保持比例 */
}
.info {
flex-grow: 1; /* 吸收剩余空间 */
}
.volunteer {
margin-top: 20px;
}
</style>
</head>
<body>
<div class="profile">
<div class="avatar-container">
<img class="avatar" src="your-avatar-url" alt="你的头像">
</div>
<div class="info">
<h2>姓名:<span id="name">张三</span></h2>
<p>学号:<span id="student-id">20220101</span></p>
<p>班级:<span id="class">计算机科学1班</span></p>
</div>
<div class="volunteer">
<h3>志愿情况</h3>
<ul>
<li>
<span>活动名称:志愿服务活动1</span>
<span>参与时长:3个月</span>
<span>参与时间:2022年4月</span>
</li>
<!-- 添加更多志愿者活动的信息,结构类似 -->
</ul>
</div>
</div>
</body>
</html>
```
在这个版本中,`.avatar-container`设置了弹性基础值并允许换行,而`.info`则会自动吸收剩余的空间。`.volunteer`区域相对于照片有了额外的顶部间距。
阅读全文