Here is the specific section of the site I'm working on:

Here is the site

I have 3 blocks with services. At the moment, they all have a height depending on the content. I need to align their height to the largest of these blocks, as well as place the "Learn price" button at the bottom of the block with an indent of 20 pixels from the bottom. Please help me do it. I have been playing with position: relative, absolute for parents and child blocks for half a day and can’t get the desired result.

  • ru.learnlayout.com/clearfix.html - Kertamorat
  • @Almost not so simple - WhoIsDT
  • @Almost and what's the point about clearfix? - Cheg
  • @iSeeDev add the code of this section to the question - Cheg
  • I can tell how to write a script on js. And just ask min-hieght - Philip Pilipchuk

1 answer 1

Alternatively, use flexbox for the section and position:absolute for the button:

 .row { display: flex; justify-content: space-between; } .block { width: calc((100% - 126px) / 3); border: #ccc solid 1px; padding-bottom: 50px; position: relative; } .btn { position: absolute; width: 50px; bottom: 10px; left: 50%; margin-left: -25px; border: #ccc solid 1px; text-align: center; } 
 <div class="row"> <div class="block"> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <div class="btn">Кнопка</div> </div> <div class="block"> <br /><br /><br /><br /><br /><br /> <div class="btn">Кнопка</div> </div> <div class="block"> <br /><br /><br /><br /><br /><br /><br /><br /> <div class="btn">Кнопка</div> </div> </div>

  • one
    Super! Thank you very much! I came up with your decision! - WhoIsDT