Question

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

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

＆＃13;

.service {
  float: left;
  width: 32%;
}

.service:nth-child(2) {
  margin: 0 2%;
}

＆＃13;

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

＆＃13;

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

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可以管理：

＆＃13;

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

＆＃13;

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

＆＃13;

使按钮位置垂直相等

3 个答案: