html - 使按钮在垂直方向上的位置相等

Question

如 float 所示，没有 Bootstrap 或任何其他网格系统。垂直对齐按钮的最佳方式是什么？

忘记添加:并在窗口缩小时保持列的高度相等。

.service {
  float: left;
  width: 32%;
}

.service:nth-child(2) {
  margin: 0 2%;
}

<div class="service">
  <h2>Service 1 </h2>
  <p>this is service</p>
  <button>click</button>
</div>
<div class="service">
  <h2>Service 2</h2>
  <p>this is service</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam commodi quidem provident optio natus eaque, eius fuga mollitia nihil a labore recusandae in similique saepe eveniet molestiae nulla illo possimus?</p>
  <button>click</button>
</div>
<div class="service">
  <h2>Service 3</h2>
  <p>this is service</p>
  <button>click</button>
</div>

Answer 1

可以通过增加高度和相对/绝对定位来实现。请参阅下面的代码。使用 flexbox 也可以达到同样的效果。

.service {
    float: left;
    width: 32%;
    height:330px;
    position:relative;
}

.service:nth-child(2){
    margin: 0 2%;
}
        button {
        position:absolute;
        bottom:0;
        }

<div class="service">
        <h2>Service 1 </h2>
        <p>this is service</p>
        <button>click</button>
    </div>
    <div class="service">
        <h2>Service 2</h2>
        <p>this is service</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam commodi quidem provident optio natus eaque, eius fuga mollitia nihil a labore recusandae in similique saepe eveniet molestiae nulla illo possimus?</p>
        <button>click</button>
    </div>
    <div class="service">
        <h2>Service 3</h2>
        <p>this is service</p>
        <button>click</button>
    </div>