Как я могу выровнять текст в верхней и нижней части того же div css?

Question

Я пытаюсь выровнять одну строку текста в верхней части изображения на нижней части изображения.

Вот plunkr

****** Name 
****** 
****** More Info 


<div class="row"> 
    <div class="col-md-4"> 
    <img src="https://graph.facebook.com/102031900129645/picture?type=square&redirect=true&width=100&height=100"> 
    <span>John Smith</span> 
    <br> 
    <span>10 friends</span> 
    </div> 
</div> 

Answer 1

Вы можете попробовать это:

.col-md-4 { 
    position: relative; 
} 

.col-md-4 span { 
    position: absolute; 
    top: 0; 
} 

.col-md-4 span:last-child { 
    top: auto; 
    bottom: 0; 
} 

Рабочая demo

Answer 2

1. Просто напишите свои пролеты над изображением.
2. Дайте родительской позиции div: относительной.
3. Дайте положение пролетов: абсолютное с верхом: 0, снизу: 0 (как требуется ).

.col-md-4 { 
 
    position: relative; 
 
} 
 

 
.col-md-4 .name { 
 
    position: absolute; 
 
    top: 0; 
 
} 
 

 
.col-md-4 .info { 
 
    position: absolute; 
 
    bottom: 0; 
 
}

<div class="row"> 
 
    <div class="col-md-4"> 
 
     <span class="name">John Smith</span> 
 
     <span class="info">10 friends</span> 
 
     <img src="https://graph.facebook.com/102031900129645/picture?type=square&redirect=true&width=100&height=100" /> 
 
    </div> 
 
</div>