Question

This is a JSFiddle显示我尝试在3列底部放置3个按钮。我使用flexbox确保所有3列都具有相同的高度，但为了使按钮位于每列的底部，我必须使它们绝对定位。因此，按钮的大小不会考虑列的大小。有没有正确的方法来避免这种情况（不使用占位符元素/边距/等）？

HTML：

<div class="container">
  <div class="row row-same-height">
    <div class="col-md-4">
      <h2>Responsive</h2>
      <!--<h4> εξαρτημένη από το ένα άκρο </h4>-->
      <p style="text-align: justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id varius leo. Aliquam erat volutpat. Proin tempor lorem et dolor sollicitudin, in dignissim arcu blandit. Nullam consectetur rutrum pretium. Vivamus imperdiet elementum neque,
        vel volutpat leo mattis in. Nam luctus pellentesque dui sed vulputate. Curabitur faucibus fringilla lectus, ut aliquet mauris dictum facilisis.</p>
      <p class="stick-to-bottom"><a class="btn btn-primary" href="per1.html" role="button">View
                details &raquo;</a></p>
    </div>
    <div class="col-md-4">
      <h2>But</h2>
      <p style="text-align: justify">Aliquam id congue libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed ullamcorper sapien nulla, eget fermentum est mattis non. Morbi tortor tellus, sollicitudin quis nisi at, hendrerit faucibus nisl. Aenean consequat felis
        urna, ut eleifend sapien tempus a. Phasellus porta mi non venenatis condimentum. Aliquam ut dolor eleifend, maximus quam vitae, scelerisque leo. Praesent metus est, lobortis eget urna a, luctus condimentum eros. Curabitur gravida maximus augue
        molestie ultricies. Mauris ac urna ac lorem sagittis auctor. Etiam facilisis rhoncus sapien, at aliquam ligula euismod ac. Vestibulum quis condimentum neque. Morbi ornare aliquam consectetur. Mauris ipsum ligula, vulputate sed tristique hendrerit,
        pellentesque fringilla nisl.</p>
      <p class="stick-to-bottom"><a class="btn btn-primary" href="per2.html" role="button">View
                details &raquo;</a></p>
    </div>
    <div class="col-md-4">
      <h2>Wrong</h2>
      <p style="text-align: justify">Duis eu nibh viverra, pretium risus id, egestas odio. Suspendisse potenti. Praesent aliquet massa sit amet nunc bibendum pellentesque. Mauris consectetur auctor magna vel consequat. Aliquam sit amet nunc quam. Vivamus eu nisi ac est viverra vehicula
        lobortis sit amet lorem. Cras ut pellentesque nisi. Curabitur ornare imperdiet quam sit amet efficitur. Vivamus viverra felis at bibendum aliquam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec
        vestibulum, quam id efficitur consequat, ipsum dolor sollicitudin augue, id mollis erat risus quis urna. Integer aliquet suscipit orci, vehicula cursus lectus malesuada in. </p>
      <p class="stick-to-bottom"><a class="btn btn-primary" href="per3.html" role="button">View
                details &raquo;</a></p>
    </div>
  </div>
</div>
<hr>
<div class="container">
  <div class="row row-same-height">
    <div class="col-md-4">
      <h2>Looks as intended</h2>
      <!--<h4> εξαρτημένη από το ένα άκρο </h4>-->
      <p style="text-align: justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id varius leo. Aliquam erat volutpat. Proin tempor lorem et dolor sollicitudin, in dignissim arcu blandit. Nullam consectetur rutrum pretium. Vivamus imperdiet elementum neque,
        vel volutpat leo mattis in. Nam luctus pellentesque dui sed vulputate. Curabitur faucibus fringilla lectus, ut aliquet mauris dictum facilisis.</p>
    </div>
    <div class="col-md-4">
      <h2>But</h2>
      <p style="text-align: justify">Aliquam id congue libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed ullamcorper sapien nulla, eget fermentum est mattis non. Morbi tortor tellus, sollicitudin quis nisi at, hendrerit faucibus nisl. Aenean consequat felis
        urna, ut eleifend sapien tempus a. Phasellus porta mi non venenatis condimentum. Aliquam ut dolor eleifend, maximus quam vitae, scelerisque leo. Praesent metus est, lobortis eget urna a, luctus condimentum eros. Curabitur gravida maximus augue
        molestie ultricies. Mauris ac urna ac lorem sagittis auctor. Etiam facilisis rhoncus sapien, at aliquam ligula euismod ac. Vestibulum quis condimentum neque. Morbi ornare aliquam consectetur. Mauris ipsum ligula, vulputate sed tristique hendrerit,
        pellentesque fringilla nisl.</p>
    </div>
    <div class="col-md-4">
      <h2>Not Responsive</h2>
      <p style="text-align: justify">Duis eu nibh viverra, pretium risus id, egestas odio. Suspendisse potenti. Praesent aliquet massa sit amet nunc bibendum pellentesque. Mauris consectetur auctor magna vel consequat. Aliquam sit amet nunc quam. Vivamus eu nisi ac est viverra vehicula
        lobortis sit amet lorem. Cras ut pellentesque nisi. Curabitur ornare imperdiet quam sit amet efficitur. Vivamus viverra felis at bibendum aliquam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec
        vestibulum, quam id efficitur consequat, ipsum dolor sollicitudin augue, id mollis erat risus quis urna. Integer aliquet suscipit orci, vehicula cursus lectus malesuada in. </p>
    </div>
  </div>
  <div class="row">
    <p class="col-md-4"><a class="btn btn-primary" href="per1.html" role="button">Viewdetails &raquo;</a></p>

    <p class="col-md-4"><a class="btn btn-primary" href="per2.html" role="button">View details &raquo;</a></p>
    <p class="col-md-4"><a class="btn btn-primary" href="per3.html" role="button">View details &raquo;</a></p>
  </div>
</div>

CSS：

.row-same-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.stick-to-bottom {
  position: absolute;
  bottom: 0;
}

Answer 1

您已经在使用flexbox，因此请使用flexbox。为什么你绝对会定位？

您需要的是垂直弯曲列（使用flex-direction: column）并使用justify-content: space-between。您还可能希望将flex: 1放在<p>标记中，其中包含文字内容（因为内容的长度不同）：

.row-same-height .col-md-4 {
    display: flex;
    flex-flow: column nowrap; /* a shorthand for `flex-direction` and `flex-wrap` */
    justify-content: space-between;
}
.row-same-height p:first-of-type {
    flex: 1;
}

并添加您喜欢的任何供应商前缀。这是您更新的Fiddle。干杯！

在引导行

1 个答案: