经典：头像与昵称描述的位置组合

从不搞抽象
441 阅读3分钟

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

<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-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;
      }
    }
  }
avatar
文章
阅读
粉丝