使按钮位置垂直相等

Question

如浮子所示，没有引导程序或任何其他网格系统。垂直对齐按钮的最佳方法是什么？

忘了添加：当窗口大小时，将列保持相等的高度。

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

Answer 2

尝试以下操作：codepen

.content{
    height:330px;
    display:table;
    position:relative;
}
.service {
    float: left;
    width: 32%;
}
.service:nth-child(2){
    margin: 0 1%;
}
.service button {
  position:absolute;
  bottom:0;
}

<div class="content">
<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>
 </div> 

Answer 3

flexbox可以管理：

.row {
  display: flex;
  justify-content: Spance-between;
}
.service {
  flex: 1 0 32%;
  display: flex;
  text-align:center;
  flex-direction: column;
  border: 1px solid lightgrey;
}
button {
  align-self: center;
  margin-top: auto;
}

<div class="row">
  <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>
</div>