垂直对齐不同的段落

Question

I am working with this website created with Drupal www.crincon.com. The section under the slides, contains several blocks with nested divs elements and a link at the end.

Block caption

What I would like to do is that the links "Read More" (with button aspect) will be all at the same height, with the same vertical alignment for all the blocks, to be displayed at the same level.

The HTML for all the blocks looks like this:

 <div class="column one"> <div class="region region-top-first"> <div id="block-block-7" class="block block-block"> <div class="content"> <p><i class="fa fa-flag fa-6" aria-hidden="true"></i></p> <h2>Localization to the market of Russia, CIS and Baltic States</h2> <p><a href="en/services/localization">Read more</a></p> </div> </div> <!-- /.block --> </div> <!-- /.region --> </div> 

I have tried many different options looking at some responses here (like relative-absolute position), but with no success.

Thank you!

Answer 1

position the read more button like below code. I add a class .readmore to the button.

.readmore {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
 }
.content {
    position: relative;
}

Answer 2

You may use flex to make this easy :

 .block { display:flex; flex-wrap:wrap } .content { text-align:center; padding:1em; background:#0194CA; box-shadow:inset 0 0 1px,inset 0 0 40px white; width:15%; min-width:150px; /* what does the thing you want , stands here below , but parent has to be a wrapping flex element : */ display:flex; flex-flow:column; justify-content:space-between; } 

 <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.min.css" rel="stylesheet"/> <div id="block-block-7" class="block block-block"> <div class="content"> <p><i class="fa fa-flag fa-6" aria-hidden="true"></i></p> <h2>Localization to the</h2> <p><a href="en/services/localization">Read more</a></p> </div> <div class="content"> <p><i class="fa fa-flag fa-6" aria-hidden="true"></i></p> <h2>Localization to the market of Russia, </h2> <p><a href="en/services/localization">Read more</a></p> </div> <div class="content"> <p><i class="fa fa-flag fa-6" aria-hidden="true"></i></p> <h2>Localization</h2> <p><a href="en/services/localization">Read more</a></p> </div> <div class="content"> <p><i class="fa fa-flag fa-6" aria-hidden="true"></i></p> <h2>Localization to the market of Russia, CIS and Baltic States</h2> <p><a href="en/services/localization">Read more</a></p> </div> <div class="content"> <p><i class="fa fa-flag fa-6" aria-hidden="true"></i></p> <h2>Localization Baltic States</h2> <p><a href="en/services/localization">Read more</a></p> </div> <div class="content"> <p><i class="fa fa-flag fa-6" aria-hidden="true"></i></p> <h2>Localization to the market of Russia, CIS and Baltic States</h2> <p><a href="en/services/localization">Read more</a></p> </div> <div class="content"> <p><i class="fa fa-flag fa-6" aria-hidden="true"></i></p> <h2>Localization to the market of Russia, CIS and Baltic States</h2> <p><a href="en/services/localization">Read more</a></p> </div> <div class="content"> <p><i class="fa fa-flag fa-6" aria-hidden="true"></i></p> <h2>Localization to the market of Russia, CIS and Baltic States</h2> <p><a href="en/services/localization">Read more</a></p> </div> </div> 

Answer 3

this might help you somehow.

#top-area a {
    color: #ECF9FD;
    border: 1px solid #92DAF5;
    padding: 5px 10px;
    border-radius: 3px;
    position: absolute;
    bottom: 20px;
    left: 20%;
    right: 20%;
}