Как сделать такое выравнивание текста?

241

04 июня 2017, 17:59

Выглядит это вот так:

Т. е. если заголовок короткий, то текст "User added" выравнивается по низу изображения. Но как только заголовок становится длиннее, текст понемногу начинает спускаться.

Как это реализовать? Пробовал обернуть текст с заголовком в блок и задать тексту абсолютное позиционирование, но получается не то.

Answer 1

Задайте минимальную высоту заголовку.

Без примера кода, могу предложить вот такой вариант:

(.item:after не нужен, добавила для наглядности)

*, ::after, ::before { 
  box-sizing:border-box; 
} 
.item{ 
  position:relative; 
  display:flex; 
  flex-wrap:wrap; 
  border:1px solid #aaa; 
  margin:0 0 1rem; 
} 
.item:after{ 
  content:'минимальная высота заголовка'; 
  position:absolute; 
  top:0; 
  left:0; 
  right:0; 
  background:#000; 
  color:red; 
  opacity:.3; 
  padding:2rem; 
  height:6rem; 
  text-align:center; 
} 
.info{ 
  display: flex; 
  flex-direction: column; 
  flex:0 0 50%; 
  max-width:50%; 
  padding:1rem; 
} 
.photo{ 
  display: flex; 
  align-items: center; 
	align-content: center; 
  justify-content: center; 
  flex:0 0 50%; 
  max-width:50%; 
  padding:1rem; 
  color:#fff; 
  text-align:center; 
  background:orange; 
} 
.caption{ 
  flex: 1; 
  text-transform: uppercase; 
  font-size:1.2rem; 
  font-weight:bold; 
  min-height:6rem; 
} 
.link{ 
  color:blue; 
  text-decoration:undeline; 
}

<div class="item"> 
  <div class="info"> 
    <div class="caption">заголовок</div> 
    <div class="link">ссылка</div> 
  </div> 
  <div class="photo">фото</div> 
</div> 
 
<div class="item"> 
  <div class="info"> 
    <div class="caption">длинный <br>заголовок</div> 
    <div class="link">ссылка</div> 
  </div> 
  <div class="photo">фото</div> 
</div> 
 
<div class="item"> 
  <div class="info"> 
    <div class="caption">очень <br>длинный <br>заголовок</div> 
    <div class="link">ссылка</div> 
  </div> 
  <div class="photo">фото</div> 
</div> 
 
<div class="item"> 
  <div class="info"> 
    <div class="caption">очень <br>очень <br>очень <br>длинный <br>заголовок</div> 
    <div class="link">ссылка</div> 
  </div> 
  <div class="photo">фото</div> 
</div>