Question

我无法弄清楚如何使每个“查看作业”在底部垂直对齐。这是一个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

Answer 2

垂直对齐是对齐要构造的元素中包含的元素。因此，如果您对.item应用了vertical-align，它会将所有项目垂直对齐到底部。但是，您将它应用于锚标记（而不是容器），它不会对齐锚标记，但它会对齐元素中的后代。

.item {
    display: table-cell!important;
    width:45%;
    height:300px;
    border:2px solid blue;
    position:relative;
}
   .item a   {
color:red;
position:absolute;
bottom:15px;
    }

我将使用绝对定位，就像我在fiddle.

中所做的那样

垂直对齐表格单元格

2 个答案: