左图右文排列

使用inline-block

    <div class="list-container">
      <img src="" alt="" class="photo" />
      <div class="info-container">
        <p><span class="name">姓名</span> <span class="age">年龄</span></p>
        <p class="sex">性别</p>
        <p class="intro">
          个人简介个人简介个人简介个人简介个人简介个人简介个人简介个人简介个人简介个人简介个人简介个人简介个人简介个人简介个人简介个人简介个人简介个人简介个人简介个人简介个人简介个人简介个人简介个人简介
        </p>
      </div>
    </div>

.list-container {
  margin: 100px 10px;
  padding: 30px;
  border: 1px solid orange;
  /* 消除inline-block产生的空白间隙 */
  font-size: 0;
  /* 垂直居中 */
  display: flex;
  align-items: center;
}
.photo {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background-color: red;
}

.info-container {
  display: inline-block;
  margin-left: 15px;
}
.name {
  font-size: 18px;
  font-weight: bold;
}
.age {
  font-size: 14px;
  color: gray;
}
.sex {
  font-size: 14px;
}
.intro {
  font-size: 14px;
}

使用浮动

 <div class="list-container">
      <div class="photo-container"><img src="" alt="" class="photo" /></div>
      <div class="info-container">
        <p><span class="name">姓名</span> <span class="age">年龄</span></p>
        <p class="sex">性别</p>
        <p class="intro">
          个人简介个人简介个人简介个人简介个人简介个人简介个人简介个人简介个人简介个人简介个人简介个人简介个人简介个人简介个人简介个人简介个人简介个人简介个人简介个人简介个人简介个人简介个人简介个人简介
        </p>
      </div>
    </div>

.list-container {
  margin: 100px 10px;
  padding: 30px;
  border: 1px solid orange;

  /* 垂直居中 */
  display: flex;
  align-items: center;
}
.photo-container {
  float: left;
  width: 90px;
  height: 90px;
}
.photo {
  width: 90px;
  height: 100%;
  border-radius: 50%;
  background-color: red;
}

.info-container {
  float:left;
  margin-left: 15px;
}
.name {
  font-size: 18px;
  font-weight: bold;
}
.age {
  font-size: 14px;
  color: gray;
}
.sex {
  font-size: 14px;
}
.intro {
  font-size: 14px;
}