В скрипке 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
}
0
Mazzy 15 Апр 2016 в 20:56

2 ответа

Лучший ответ

Вы можете заключить текст в набор p ans, img и p inline-block. Тогда также возможно вертикальное выравнивание. white-space: nowrap на li, чтобы img и p оставались рядом: https://jsfiddle.net/ 7xd06гум / 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/

1
G-Cyrillus 15 Апр 2016 в 18:11
  1. Добавить к изображению float: left
  2. Оберните текст в div
  3. Замените span с текстом на блочный элемент.

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

-1
rmpstmp 15 Апр 2016 в 18:07