高度相同但内容长度不同的列和底部的按钮

Question

我正在尝试在相同高度的行中设置3列。到目前为止，一切都使用弹性和固定高度，除了段落被删除。标题和文字都可以有不同的长度。目前.btn-wrapper padding-top有 <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; ，可以产生空间错觉。有没有办法解决这个问题，以便所有字母都可见？无论段落如何结束，只是按钮和文本之间有空格。

有更好的解决方法吗？

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

DLList *d1 = new DLList();
d1 = d;   // <------------- This line
d1->display("Cloned list"); //Displays the cloned list fine

}

目前，如果文字较长，则会像在此图片中一样剪切

Answer 1

您不需要固定高度，您需要将flex属性扩展到.row div。

这将自动使所有列的高度相同。

哦，你不需要定位按钮div ... flexbox可以做到这一点。

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Codepen Demo