이미지 옆에 두 줄의 텍스트 표시

Question

fiddle에서 볼 수 있듯이 이름과 제목은 이미지와 나란히 표시됩니다 (screenshot).

그러나 나는 그들이 모두 이미지에 부합하고, 그래서 그들이 수직 목록 스타일없이 이미지 옆에 서로의 상단을 중심으로 다음과 같이 표시됩니다 선호 :

• 제목
• 이름

.people { 
 
    display: inline-block; 
 
    width: 33%; 
 
    margin-bottom: 40px; 
 
} 
 

 
.people img, 
 
.title { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    padding-left: 30px; 
 
}

<div class="people"> 
 
    <a href="#"> 
 
    <img src="//0.gravatar.com/avatar/f9879d71855b5ff21e4963273a886bfc?s=120"> 
 
    </a> 
 
    <p class="title">Title</p> 
 
    <a class="name" href="#">Name</a> 
 
</div>

Answer 1

는 당신이 그들에게 형제를 만들어 나란히 필요한 요소를 포장, 당신은 .people

---

에 있었다 같은 속성을 부여

body, 
 
p { 
 
    margin: 0 
 
} 
 
.people-wrap { 
 
    width: 33%; 
 
    display: inline-block; 
 
    border: red solid 
 
} 
 
.people, 
 
.card { 
 
    display: inline-block; 
 
    vertical-align: middle 
 
} 
 
img { 
 
    display: block 
 
    /* remove gap*/ 
 
}

<div class="people-wrap"> 
 
    <div class="people"> 
 
    <a href="#"> 
 
     <img src="//0.gravatar.com/avatar/f9879d71855b5ff21e4963273a886bfc?s=120"> 
 
    </a> 
 
    </div> 
 
    <div class="card"> 
 
    <p class="title">Title</p> 
 
    <a class="name" href="#">Name</a> 
 
    </div> 
 
</div>

Answer 2

당신이 물어 본 것에 따르면, 아래 코드가 당신이 원하는 것입니다. (당신의 html/css를 조금 수정했고, here's your fiddle). 그러나 people 클래스에 33 % 너비 세트가 있으므로 너무 작아지면 목록이 이미지 아래로 떨어집니다.

HTML :

<div class="people"> 
    <div class='col mid'> 
    <a href="#"> 
     <img src="//0.gravatar.com/avatar/f9879d71855b5ff21e4963273a886bfc?s=120">  </a> 
    </div> 

    <div class='image-list'> 
    <ul> 
     <li> 
     <label>Title</label> 
     </li> 
     <li> 
     <a href="#">Name</a> 
     </li> 
    </ul> 
    </div> 

</div> 

CSS :

.col { 
    display: inline-block; 
} 
.col.mid { 
    vertical-align: middle; 
} 
.people { 
    display: inline-block; 
    width: 33%; 
    margin-bottom: 40px; 
} 

.image-list { 
    display: inline-block; 
    vertical-align: middle; 
} 

.image-list ul { 
    padding: 0 0 0 30px; 
    margin: 0; 
    list-style: none; 
}