html - 您可以相对或绝对地在 display:table-cell 中定位项目吗？

Question

我有一个链接，我希望它始终位于它所在单元格的右下角。现在该链接位于 < p > 元素中。我尝试了绝对定位和相对定位，但我可以得到我想要的效果。

我有一排有 4 个单元格的行，当尝试应用绝对位置时，它将元素带到右侧的最后一个单元格......而不是仅仅将它放在它所在的单元格中。我尝试了各种方法，但不确定是否我肯定很累或试图做不可能的事情。

我对 css 表很陌生，所以我可能认为这一切都是错误的。

这是一个例子：

• http://jsfiddle.net/56H5x/1/

最右侧的“了解更多”链接应位于第一个单元格的右下角。

提前致谢。

Answer 1

扩展 Ahsan Rathod 在 Firefox 中解决此问题的答案，将您的内容包装在 div 中，并将您的属性设置在此 div 上，而不是将 div 设置为 display table-cell

.cell-div {display:table-cell}
.relative-div {position:relative; width:100%}
.absolute-el {position:absolute}

<div class="cell-div">
    <div class="relative-div">
        <div class="absolute-el">
            <img ... >
        </div>
    </div>
</div>

Answer 2

在设置在具有元素的父元素上设置position:absolute的子元素上。<p>position:relative<div><p>

所以子元素将相对于它的父元素。

编辑：

在 Chrome、Safari、Opera 和 IE 中使用JS Fiddle

position:relative但在Firefox 中不兼容，因为 Firefox 不服从display:table-cell元素。

请参阅参考资料：

Answer 3

编辑：对不起..!! 错过了 ：）。正如 ahsaan 所说，添加相对于 .layout-cell 的位置并修改您的 HTML，如下所示。

 .layout-cell {
    display: table-cell;
    vertical-align: top;
    position: relative;
 }

 .layout-cell div{
   position:absolute;
   bottom:0;
   right:0;
  }

<div class="layout-cell columnBody-wrapper curvedBottom">
    <p>Column 3</p>
    <div><a class="button button" href="#">Learn More</a></div>
</div>