CSSを使用してテキストコンテナの高さを揃える

Question

3つのコンポーネントが連続していて、それらのボタンをコンテナの下部に揃えたい。しかし、各コンテナは異なるテキストを持つので、高さは固定されておらず、高さを厳密にしたくありません。

どのように私はコンテナの整列をCSSだけで達成でき、IE9とも互換性がありますか？

.container-of-3 > div{ 
 
     float: left; 
 
     width: 33.33333333333%; 
 

 
     > img{ 
 
     margin-left: calc((100% - 90px)/2); 
 
     } 
 

 
    } 
 

 
    .button-link{ 
 
     background-color: #69be28; 
 
     color: #fff; 
 
     padding-top: 0.25rem; 
 
     padding-bottom: 0.25rem; 
 
     padding-left: 1rem; 
 
     padding-right: 1rem; 
 
     text-decoration: none; 
 
     border-radius: 5px; 
 
    }

<div class="container-of-3"> 
 
     <div> 
 
     <img src="http://placehold.it/90x90" class="" alt=""> 
 

 
     <h5 class="">Hybrid Cloud</h5> 
 

 
     <p class="">Lorem ipsum dolor sit amet, ius fastidii similique argumentum in, porro putent consetetur vix ut. 
 
     Tibique percipitur ex vim, vim id idque soleat tibique, has te erant doctus complectitur. Nusquam oportere 
 
     vituperata id cum, adipisci persecuti an pro. Eu vim facer graecis, id nec dicta integre interpretaris</p> 
 

 
     <div class="text-align__center"> 
 
      <a href="http://www.hotmail.com" class="button-link" target="_blank"> 
 
      <i class="fa fa-chevron-right"></i> 
 
     Read More</a> 
 
     </div> 
 

 
     </div> 
 

 
     <div> 
 

 

 
    <img src="http://placehold.it/90x90" class="" alt=""> 
 

 
    <h5>Hybrid Cloud</h5> 
 

 
    <p>Lorem ipsum dolor sit amet, ius fastidii similique argumentum in, porro putent consetetur vix ut. Tibique 
 
     percipitur ex vim, vim id idque soleat tibique, has te erant doctus complectitur. </p> 
 

 
     <div class="text-align__center"> 
 
      <a href="http://www.hotmail.com" class="button-link" target="_blank"> 
 
      <i class="fa fa-chevron-right"></i> 
 
     Read More</a> 
 
      </div> 
 

 
     </div> 
 

 
     <div> 
 

 
    <img src="http://placehold.it/90x90" class="" alt=""> 
 

 
    <h5>Hybrid Cloud</h5> 
 

 
    <p>Lorem ipsum dolor sit amet</p> 
 

 
    <div class="text-align__center"> 
 
     <a href="http://www.hotmail.com" class="button-link" target="_blank"> 
 
     <i class="fa fa-chevron-right"></i> 
 
     Read More</a> 
 
    </div> 
 

 
     </div> 
 

 
    </div>

http://codepen.io/neginbasiri/pen/mPYzKx

Answer 1

同じ高さ）は、これが行われ、最も外側の親に だけで設定位置を作る必要はなく、 leftとrightを指定せずにposition: absoluteにボタンをbottom: 0と設定してください。

.container-of-3 { 
 
    position: relative; 
 
    padding-bottom: 40px; 
 
    overflow: hidden; 
 
} 
 

 
.container-of-3 > div{ 
 
    float: left; 
 
    width: 33.33333333333%; 
 

 
    > img{ 
 
    margin-left: calc((100% - 90px)/2); 
 
    } 
 

 
} 
 

 
.div-content { 
 
    text-align: center; 
 
} 
 

 
.button-holder { 
 
    width: 33.33333333333%; 
 
    position: absolute; 
 
    text-align: center; 
 
    bottom: 0; 
 
} 
 

 
.button-link{ 
 
    background-color: #69be28; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    color: #fff; 
 
    padding-top: 0.25rem; 
 
    padding-bottom: 0.25rem; 
 
    padding-left: 1rem; 
 
    padding-right: 1rem; 
 
    text-decoration: none; 
 
    border-radius: 5px; 
 
}

<div class="container-of-3"> 
 
    <div> 
 
    <div class="div-content"> 
 
     <img src="http://placehold.it/90x90" class="" alt=""> 
 

 
     <h5 class="">Hybrid Cloud</h5> 
 

 
     <p class="">Lorem ipsum dolor sit amet, ius fastidii similique argumentum in, porro putent consetetur vix ut. 
 
    Tibique percipitur ex vim, vim id idque soleat tibique, has te erant doctus complectitur. Nusquam oportere 
 
    vituperata id cum, adipisci persecuti an pro. Eu vim facer graecis, id nec dicta integre interpretaris</p> 
 
    </div> 
 

 
    <div class="text-align__center button-holder"> 
 
      <a href="http://www.hotmail.com" class="button-link" target="_blank"> 
 
      <i class="fa fa-chevron-right"></i> 
 
    Read More</a> 
 
    </div> 
 

 
    </div> 
 

 
    <div> 
 
     <div class="div-content"> 
 
      <img src="http://placehold.it/90x90" class="" alt=""> 
 
      <h5>Hybrid Cloud</h5> 
 
      <p>Lorem ipsum dolor sit amet, ius fastidii similique argumentum in, porro putent consetetur vix ut. Tibique 
 
    percipitur ex vim, vim id idque soleat tibique, has te erant doctus complectitur. </p> 
 
     </div> 
 

 
    <div class="text-align__center button-holder"> 
 
     <a href="http://www.hotmail.com" class="button-link" target="_blank"> 
 
     <i class="fa fa-chevron-right"></i> 
 
    Read More</a> 
 
    </div> 
 
    </div> 
 

 
    <div> 
 
     <div class="div-content"> 
 
      <img src="http://placehold.it/90x90" class="" alt=""> 
 
      <h5>Hybrid Cloud</h5> 
 
      <p>Lorem ipsum dolor sit amet</p> 
 
     </div> 
 

 
<div class="text-align__center button-holder"> 
 
    <a href="http://www.hotmail.com" class="button-link" target="_blank"> 
 
    <i class="fa fa-chevron-right"></i> 
 
    Read More</a> 
 
</div> 
 

 
    </div> 
 

 
</div>

Answer 2

彼らは高さと一致しないため、フロートは本当にここであなたを助けにはなりません。 divをテーブルテーブルのセルに変更する必要があります。次に、ボタンが常に同じ位置になるように絶対的な位置に配置します。 Firefox 30以降では、すべてのブラウザが表のセル要素の相対位置を扱います。下の位置は正確ではありませんので、あなたに適したさまざまなパディングと配置を試してみてください。 3つの列のためのテーブルセル、それらはすべて同じ高さです。この方法：コンテナやディスプレイ用のテーブル：

.container-of-3 { 
    display:table; 
    table-layout: fixed; 
    width:100% 

    > div { 
    display: table-cell; 
    position: relative; 
    vertical-align:top; 
    padding-bottom:50px; 

    > img{ 
     margin-left: calc((100% - 90px)/2); 
    } 
    } 
} 

.button-link{ 
    position: absolute; 
    bottom: 10px; 
    left: 0; 
    background-color: #69be28; 
    color: #fff; 
    padding-top: 0.25rem; 
    padding-bottom: 0.25rem; 
    padding-left: 1rem; 
    padding-right: 1rem; 
    text-decoration: none; 
    border-radius: 5px; 
} 

Answer 3

あなたは、ディスプレイを使用することができます。そして、一番下にあるボタンを修正すれば完了:)このフィドル

.container-of-3 { 
    display: table; 
} 
.container-of-3 > div{ 
    width: 33.33333333333%; 
    display:table-cell; 
    height: 100%; 
    padding-bottom: 20px; 
    position: relative; 
} 

チェックアウトしている：https://jsfiddle.net/br6c5way/