1. 使用float调整位置

<!-- 基础信息 -->
<div class="base-info"><div class="base-avatar" :class="'baseAvatar'+3"><img class="base-avatar-img" src="http://gplove.top/dog1.png"></div><div class="base-desc" :class="'baseDesc'+3"><span class="name">Moonsic</span><span class="age">18</span><span class="position">杭州</span></div>
</div>
复制代码

.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调整位置

<!-- 基础信息 -->
<div class="base-info" :class="'baseInfo'+3"><div class="base-avatar"><img class="base-avatar-img" src="http://gplove.top/dog1.png"></div><div class="base-desc" :class="'baseDesc'+3"><span class="name">Moonsic</span><span class="age">18</span><span class="position">杭州</span></div>
</div>
复制代码

.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-aroundalign-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.简单的头像描述上下组合

<div class="avatar"><img src="http://gplove.top/dog1.png" alt=""><p class="desc name">Moonsic Moonsic Moonsic Moonsic Moonsic</p><p class="desc age">18</p><p class="desc position">杭州</p>
</div>
复制代码

.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保持高度不变

<div class="avatar"><img src="http://gplove.top/dog1.png" alt=""><p class="name">Moonsic</p>
</div>
复制代码

.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.简单的头像描述左右组合

① 简单写法

<div class="avatar"><img src="http://gplove.top/dog1.png" alt=""><p class="desc name">Moonsic Moonsic Moonsic Moonsic Moonsic</p><p class="desc age">18</p><p class="desc position">杭州</p>
</div>
复制代码

.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;}
}复制代码

② 复杂写法

<div class="base-info"><div class="base-avatar"><img class="base-avatar-img" src="http://gplove.top/dog1.png"></div><div class="base-desc"><span class="sp name">Moonsic Moonsic Moonsic Moonsic Moonsic </span><span class="sp age">18</span><span class="sp position">杭州</span></div>
</div>
复制代码

  .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-aroundalign-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;}}}
复制代码