同じ高さでさまざまな内容の長さと底にあるボタンの列

Question

同じ高さの行に3列を設定しようとしています。パラグラフが切り取られていることを除いて、フレックスと固定高さを使って、これまでのところすべてが動作します。タイトルとテキストの長さはさまざまです。現在、.btn-wrapperは、周囲に幻想を与えるpadding-topを持っています。すべての文字が見えるように修正する方法はありますか？段落がどのように終了するかは問題ではなく、ボタンとテキストの間にスペースがあるだけです。

これを回避するには良い方法がありますか？

http://codepen.io/anon/pen/QKbAwb?editors=1100

<div class="col col-md-4"> 
     <div class="col-inside"> 
      <p>Lorem ipsum..../p> 
     <div class="btn-wrapper"> 
      <a href="#" class="btn btn-default">Read more</a> 
      </div> 
     </div> 
    </div> 


.col { 
    display: flex; 
} 

.col-inside { 
    flex: 1; 
    flex-direction: column; 
    height: 200px; 
    overflow: hidden; 
    position: relative; 
} 


.btn-wrapper { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    padding-top: 20px; 
    background-color: #fff; 

}

現在テキストがあれば、あなたは一定の高さを必要としない

Answer 1

この画像のように切り取られますされている場合、 flexプロパティを.row divに拡張する必要があります。

これは自動的にすべての列を同じ高さにします。

ああ、あなたはボタンdivをどちらかの位置に置く必要はありません。フレックスボックスはこれを行うことができます。

.row { 
 
    display: flex; 
 
} 
 
.col { 
 
    padding: 0; 
 
    flex: 1; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.col-inside { 
 
    border: 1px solid #999; 
 
    flex: 1; 
 
    display: flex; 
 
    margin: 0 10px; 
 
    flex-direction: column; 
 
} 
 
h2 { 
 
    margin-top: 0; 
 
    font-size: 26px; 
 
    font-weight: 600; 
 
    padding: 20px; 
 
    padding-bottom: 0; 
 
} 
 
.author { 
 
    font-style: italic; 
 
    font-size: 13px; 
 
    margin-bottom: 10px; 
 
    padding: 0 20px; 
 
} 
 
p { 
 
    padding: 0 20px; 
 
} 
 
.btn-wrapper { 
 
    margin-top: auto; 
 
    width: 100%; 
 
    padding-top: 20px; 
 
    background-color: #fff; 
 
} 
 
.btn.btn-default { 
 
    width: 100%; 
 
    display: block; 
 
    border-radius: 0; 
 
    background-color: grey; 
 
    color: #eee; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="container"> 
 
    <div class="row"> 
 

 

 
    <div class="col col-md-4"> 
 
     <div class="col-inside"> 
 
     <img src="http://placehold.it/420x150" class="img-responsive" /> 
 
     <h2>Some title</h2> 
 
     <div class="author">John Smith</div> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui obcaecati dolores at cupiditate ullam quaerat earum, quaerat earum, magni explicabo eveniet saepe! quaerat earum, magni explicabo eveniet saepe! magni explicabo eveniet saepe!</p> 
 
     <div class="btn-wrapper"> 
 
      <a href="#" class="btn btn-default">Read more</a> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="col col-md-4"> 
 
     <div class="col-inside"> 
 
     <img src="http://placehold.it/420x150" class="img-responsive" /> 
 
     <h2>Some title longer Some title longer Some title longer Some title longer</h2> 
 
     <div class="author">John Smith</div> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui cupiditate quaerat earum, magni explicabo eveniet saepe!</p> 
 
     <div class="btn-wrapper"> 
 
      <a href="#" class="btn btn-default">Read more</a> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="col col-md-4"> 
 
     <div class="col-inside"> 
 
     <img src="http://placehold.it/420x150" class="img-responsive" /> 
 
     <h2>Some title</h2> 
 
     <div class="author">John Smith</div> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.Qui obcaecati dolores at cupiditate ullam quaerat earum, magni explicabo eveniet saepe! amet, consectetur adipisicing elit. Qui obcaecati dolores Qui obcaecati dolores at cupiditate ullam 
 
      quaerat earum, magni explicabo eveniet saepe! quaerat earum, magni explicabo eveniet saepe! amet, consectetur adipisicing elit. Qui obcaecati dolores eveniet saepe! amet, consectetur adipisicing elit. Qui obcaecati dolores eveniet saepe! amet, 
 
      consectetur adipisicing elit. Qui obcaecati dolores</p> 
 
     <div class="btn-wrapper"> 
 
      <a href="#" class="btn btn-default">Read more</a> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div>

Codepen Demo