Question

在小提琴中 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/

Answer 2

添加到图片float: left
将您的文字换入div
将带有文字的span更改为块元素。

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

内联圆形图像，右侧文本分为两行

2 个答案: