html - 与表格单元格垂直对齐

Question

我不知道如何让每个“View Jobs”在底部垂直对齐。这是一个 jsfiddle https://jsfiddle.net/2ffm8gna/5/

HTML:
  <div class="row">
        <div class="item">
            <h5>Admin</h5>
            <p>Apply your skills and experience to any number of functional areas where customer satisfaction is the top priority.Apply your skills and experience to any number of functional areas where customer satisfaction is the top priority.</p>
            <a href="#">View Jobs</a>
        </div>
        <div class="item">
            <h5>Marketing</h5>
            <p>Be part of an inspired team responsible for ensuring brand integrity and championing the MD Value Proposition out in the world.<br /></p>
            <a href="#">View Jobs</a>
        </div>
    </div>

CSS

     .row {
     display: table!important;
     }
     .item {
    display: table-cell!important;
    width:45%;
    height:300px;
    border:2px solid blue;
}
   .item a   {
vertical-align:bottom!important;
color:red;
display: table-cell!important;
    }

我在这里错过了什么？

Answer 1

您可以为此使用绝对定位:

.item {
  position: relative;
}

.item a {
  position: absolute;
  bottom: 0;
}

JSFiddle