Как в li расположить один блок сверху (.section__item-img__wrap), другой снизу (.section__social)?

Question

[Khm]

<ul class="section__list">
	<li class="section__item">
		<div class="section__item-img__wrap">
			<img src="img/james.png" alt="" class="section__item-img">
		</div>
		<h3 class="section__item-title">Jim Carrey</h3>
		<h4 class="section__item-title__inf">Actor</h4>
		<p class="section__item-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna.</p>
		<div class="section__social">
			<a href="" class="section__social-link section__social-link-fb"><span class="hidden">Facebook</span></a>
			<a href="" class="section__social-link section__social-link-tw"><span class="hidden">Twitter</span></a>
			<a href="" class="section__social-link section__social-link-mail"><span class="hidden">Mail</span></a>
	</div>
</li>
<style>
.section__item{
display: inline-block;
max-width: 200px;
margin-left: 75px;
vertical-align: top;
}
</style>

Answer 1

[Максим Гатилин]

А известна высота главного контейнера?

Comments

[Khm]

Нет. Дело в том, что блок .section__item-text может быть разной высоты, поэтому сейчас блок соц. кнопок всегда расположен на разном уровне (joxi.ru/L21bZdxhKJ14AX), а хотелось бы на одном.

Answer 2

[#rybak]

Уточните вопрос.
Что должно получиться в итоге?
Есть пример или образец?
Блоки должны залезать друг на друга?

Comments

[Khm]

Нет, блоки не должны залезать друг на друга. Нужно, чтоб в итоге блок .section__social был "прибит" к низу li ( примерно так: joxi.ru/krDD50YFD6VErp). Дело в том, что блок .section__item-text может быть разной высоты, поэтому сейчас блок соц. кнопок всегда расположен на разном уровне, а хотелось бы на одном.

[Khm]

На данный момент так joxi.ru/L21bZdxhKJ14AX

[#rybak]

Думаю единственный стабильный и кроссбраузерный способ:
- дать фиксированную высоту родительскому блоку
- блок социальных сетей поставить вниз с помощью position: absolute;
- будет уместным дать нижний padding для родительского блока, чтобы текст не залезал на соц. сети.

.section__item{
display: block;
float: left;
height: 335px;
max-width: 200px;
margin-left: 75px;
vertical-align: top;
padding-bottom: 33px;
position: relative;
}
.section__social {
position: absolute;
bottom: 15px;
}

В таких случаях как у вас, важную роль играет количество слов в тексте.
Очень помогает ограничение текста по количеству символов + кнопка "читать полный текст" ниже.
Я несколько раз сталкивался с подобной задачей, и в итоге приходил к этому способу с чётко заданной высотой.

[Khm]

Так пробовала, думала, может еще есть способы, но за совет все равно спасибо большое!)