It looks like this:

enter image description here

That is, if the title is short, the text "User added" is aligned to the bottom of the image. But as the heading gets longer, the text gradually begins to descend.

How to implement it? I tried to wrap the text with the title in the block and set the text to absolute positioning, but it’s not that.

  • the browser does it automatically - Dmitry Gvozd
  • @Dmitry How can he do this automatically? - Byulent
  • Why the link to the site did not lead? - Alex78191
  • @ Alex78191 is not a site, but just a template - Byulent
  • @Byulent then the link to the template - Alex78191

1 answer 1

Set the minimum height for the header.

Without sample code, I can offer this option:

( .item:after not needed, added for clarity)

 *, ::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>

  • I guessed this myself, but thanks anyway. - Byulent
  • You can wrap the top in a separate div and set the max-height and for the min-height header - Alex78191