列高度相同，但內容長度不同且底部有按鈕

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 ... flexbox可以做到這一點。

.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