1. 使用float调整位置
复制代码
Moonsic 18 杭州
.base-info { $avatar-height: 80px; position: relative; overflow: hidden; padding: 20px 10px; background-color: #2196f3; .base-avatar { margin: 0 10px; .base-avatar-img { display: block; margin: 0 auto; width: $avatar-height; height: $avatar-height; border-radius: 50%; } } .base-desc { height: $avatar-height; display: -webkit-flex; display: flex; overflow: hidden; flex-direction: column; // flex-direction: row | row-reverse | column | column-reverse; justify-content: center; // justify-content: flex-start | flex-end | center | space-between | space-around > span { color: #fff; } .name { font-size: 20px; } } //展示位置1 .baseAvatar1 { float: left; } .baseDesc1 { float: left; } //展示位置2 .baseAvatar2 { text-align: center; } .baseDesc2 { text-align: center; } //展示位置3 .baseAvatar3 { float: right; } .baseDesc3 { float: right; text-align: right; }}复制代码 2. 使用flex-direction和align-items调整位置
复制代码Moonsic 18 杭州
.base-info { $avatar-height: 80px; padding: 20px 10px; background-color: #2196f3; display: flex; flex-direction: row; // flex-direction: row | row-reverse | column | column-reverse; justify-content: flex-start; // justify-content: flex-start | flex-end | center | space-between | space-around align-items: center; // align-items: flex-start | flex-end | center | baseline | stretch; .base-avatar { margin: 0 10px; .base-avatar-img { display: block; margin: 0 auto; width: $avatar-height; height: $avatar-height; border-radius: 50%; } } .base-desc { height: $avatar-height; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; > span { color: #fff; } .name { font-size: 20px; } }}//展示位置1.baseInfo1 { flex-direction: row; .baseDesc1 { align-items: flex-start; }}//展示位置2.baseInfo2 { flex-direction: column; .baseDesc2 { align-items: center; }}//展示位置3.baseInfo3 { flex-direction: row-reverse; .baseDesc3 { align-items: flex-end; }}复制代码 3.简单的头像描述上下组合
复制代码Moonsic Moonsic Moonsic Moonsic Moonsic
18
杭州
.avatar{ padding: 20px 10px; background-color: #2196f3; text-align: center; overflow: hidden; img { width: 80px; height: 80px; border-radius: 50%; } .desc { color: #ffffff; font-size: 14px; margin-top: 2px; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .name{ font-size: 18px; margin-top: 5px; }}复制代码 ① px保持高度不变
复制代码Moonsic
.avatar{ background: #fff url('http://gplove.top/dog1.png') no-repeat; background-position: bottom; background-size: contain; width: 85vw; height: 200px; margin: 20px auto; border-radius: 18px; box-shadow: 0 0 30px 5px rgba(68, 123, 186, 0.35); text-align: center; overflow: hidden; img { width: 80px; height: 80px; border-radius: 50%; margin-top: 20px; } p { font-size: 18px; margin-top: 10px; }}复制代码 ② vw保持宽高比例不变
.avatar{ background: #fff url('http://gplove.top/dog1.png') no-repeat; background-position: bottom; background-size: contain; width: 85vw; height: 45vw; margin: 5vw auto; border-radius: 4vw; box-shadow: 0 0px 30px 5px rgba(68, 123, 186, 0.35); text-align: center; overflow: hidden; img { width: 18vw; height: 18vw; border-radius: 50%; margin-top: 4vw; } p { font-size: 5vw; margin-top: 1vw; }}复制代码 3.简单的头像描述左右组合
① 简单写法
复制代码Moonsic Moonsic Moonsic Moonsic Moonsic
18
杭州
.avatar{ $avatar-height: 80px; padding: 20px 10px; background-color: #2196f3; overflow: hidden; img { width: $avatar-height; height: $avatar-height; border-radius: 50%; float: left; } .desc { color: #ffffff; font-size: 14px; margin-top: 2px; display: inline-block; float: left; width: -webkit-calc(100% - 80px); width: -moz-calc(100% - 80px); width: calc(100% - 80px); padding-left: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .name{ font-size: 18px; margin-top: 6px; }}复制代码 ② 复杂写法
复制代码Moonsic Moonsic Moonsic Moonsic Moonsic 18 杭州
.base-info { $avatar-height: 70px; padding: 20px 10px; background-color: #2196f3; display: flex; flex-direction: row; // flex-direction: row | row-reverse | column | column-reverse; justify-content: flex-start; // justify-content: flex-start | flex-end | center | space-between | space-around align-items: center; // align-items: flex-start | flex-end | center | baseline | stretch; .base-avatar { margin: 0 10px; .base-avatar-img { display: block; margin: 0 auto; width: $avatar-height; height: $avatar-height; border-radius: 50%; } } .base-desc { width: -webkit-calc(100% - 100px); width: -moz-calc(100% - 100px); width: calc(100% - 100px); height: $avatar-height; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; .sp { color: #fff; font-size: 14px; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; /*display: -webkit-box;*/ /*-webkit-box-orient: vertical;*/ /*-webkit-line-clamp: 1;*/ /*overflow: hidden;*/ } .name { font-size: 18px; } } }复制代码