Question

我有一个链接，我想要始终位于它所在的单元格的右下角。现在链接位于＆lt; p>元件。我试着做绝对和相对定位，但我可以得到我想要的效果。

我有一个包含4个单元格的行，当试图应用绝对位置时，它将元素带到右边的最后一个单元格...而不是仅仅将它放在它所在的单元格内。我尝试了各种方法但是不确定我是否确实厌倦或试图做不可能的事。

我对css表很新，所以我可能会想到这一切都错了。

以下是一个例子：

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

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

提前致谢。

Answer 1

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

因此子元素将相对于其父元素。

编辑：

工作JS Fiddle 在Chrome，Safari，Opera和IE中

但在Firefox中不兼容，因为Firefox不遵守position:relative元素上的display:table-cell。

请参阅reference：

Answer 2

编辑：对不起.. !!错过了：）。正如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>

Answer 3

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

您可以在显示器中显示相对或绝对位置项：table-cell？

3 个答案: