垂直方向に異なる段落を整列する

Question

私はこのサイトをDrupal www.crincon.comで作成しています。 スライドの下のセクションには、div要素がネストされたブロックがいくつかあり、最後にリンクがあります。

Block caption

私は何をしたいのリンクは（ボタンの局面に）「続きを読む」ということである時に表示されるすべてのブロックに同じ垂直方向の配置、で、すべて同じ高さになります同じレベル。すべてのブロックのためのHTMLは次のようになります

：

<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>

私は（相対絶対位置のような）、ここでいくつかの回答を見て、多くの異なるオプションを試してみましたが、ありません成功してきました。

ありがとうございました！

Answer 1

ポジション以下のコードのようにボタンを押してください。私はクラスに.readmoreボタンを追加します。

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

Answer 2

あなたは、これは簡単にするためにフレックス使用することができます：

.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

これは何とかあなたを助けるかもしれません。

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