html - 两行内嵌圆形图像，右侧文本

Question

在 fiddle 中 https://jsfiddle.net/7xd06gum/我试图在右侧两行下显示三张带有文本的图像，但我正在努力做到这一点。你有什么建议吗？基本上图像需要在左边，文本在右边，名称在顶行，工作在新行。你有什么建议吗？

HTML

<ul class="upcoming-people__nav">
  <li class="upcoming-people__navItem">
    <img class="upcoming-people__img" src="https://media4.popsugar-assets.com/files/2015/01/28/952/n/1922398/3f506df2_main.jpg" />
    <span class="upcoming-people__name">James Cook</span>
    <span class="upcoming-people__job">Manager, AAX spa</span>
  </li>
  <li class="upcoming-people__navItem">
    <img class="upcoming-people__img" src="https://media4.popsugar-assets.com/files/2015/01/28/952/n/1922398/3f506df2_main.jpg" />
    <span class="upcoming-people__name">James Cook</span>
    <span class="upcoming-people__job">Manager, AAX spa</span>
  </li>
  <li class="upcoming-people__navItem">
    <img class="upcoming-people__img" src="https://media4.popsugar-assets.com/files/2015/01/28/952/n/1922398/3f506df2_main.jpg" />
    <span class="upcoming-people__name">James Cook</span>
    <span class="upcoming-people__job">Manager, AAX spa</span>
  </li>
</ul>

CSS

.upcoming-people__nav {
  list-style-type: none;
}
.upcoming-people__navItem {
  display: inline;
  color: #000000;
  padding-right: 100px;
}
.upcoming-people__img {
  width: 70px;
  height: auto;
  max-width: 100%;
  border: 2px solid #ffffff;
  border-radius: 50%;
}
.upcoming-people__name {
  margin-left: 10px;
  font-size: 18px;
  font-weight: 300;
  letter-spacing: 0.015em;
}
.upcoming-people__job {
  margin-left: 10px;
  color: #000000
}

Answer 1

您可以将文本包装在 p ans set 中，img 和 p inline-block。然后垂直对齐也是可能的。white-space:nowrap on li 以确保 img 和 p 并排放置:https://jsfiddle.net/7xd06gum/6/

.upcoming-people__nav {
  list-style-type: none;
}

.upcoming-people__navItem {
  display: inline-block;
  color: #000000;
  padding-right: 100px;
  white-space: nowrap;
}

.upcoming-people__img {
  width: 70px;
  display: inline-block;
  border: 2px solid #ffffff;
  border-radius: 50%;
  vertical-align: middle;
}

.upcoming-people__navItem p {
  display: inline-block;
  vertical-align: middle;
}

.upcoming-people__name {
  margin-left: 10px;
  font-size: 18px;
  font-weight: 300;
  letter-spacing: 0.015em;
  display: block;
}

.upcoming-people__job {
  margin-left: 10px;
  color: #000000
}

<ul class="upcoming-people__nav">
  <li class="upcoming-people__navItem">
    <img class="upcoming-people__img" src="https://media4.popsugar-assets.com/files/2015/01/28/952/n/1922398/3f506df2_main.jpg" />
    <p><span class="upcoming-people__name">James Cook</span>
      <span class="upcoming-people__job">Manager, AAX spa</span>

    </p>
  </li>
  <li class="upcoming-people__navItem">
    <img class="upcoming-people__img" src="https://media4.popsugar-assets.com/files/2015/01/28/952/n/1922398/3f506df2_main.jpg" />

    <p><span class="upcoming-people__name">James Cook</span>
      <span class="upcoming-people__job">Manager, AAX spa</span>

    </p>
  </li>
  <li class="upcoming-people__navItem">
    <img class="upcoming-people__img" src="https://media4.popsugar-assets.com/files/2015/01/28/952/n/1922398/3f506df2_main.jpg" />
    <p>
      <span class="upcoming-people__name">James Cook</span>
      <span class="upcoming-people__job">Manager, AAX spa</span>

    </p>
  </li>
</ul>

https://jsfiddle.net/7xd06gum/6/