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

Question

我试图在同一行中设置 3 列相同的高度。到目前为止，一切都可以使用 flex 和固定高度，除了该段落被删除。标题和正文都可以有不同的长度。目前 .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