等高柱上的绝对位置元素 - 如何？

Question

以下是我无法做到的，仅使用CSS ：

列应具有相同的高度。 并且，在给定列上，绝对定位元素应该相对于该列存在：

HTML：

<div class="wrapper">
 <div class="inner">
  <div class="column">
   <img src="http://www.english3.com/wp-content/uploads/2013/05/DFI-Logo-300px-X-200px.png"/>
  </div>
  <div class="column info">
   <p>Some text here yeah :).</p>
   <p>Some text here yeah :)</p>
   <p>Some text here yeah :)</p>
   <a class="link" href="#">I should be absolute.</a>
  </div>
 </div>
</div>

CSS：

.wrapper {
    overflow: hidden;
    position: relative;
}

/*added */
.inner {
    width: 100%;
    display: table;
}

.column {
    display: table-cell;
    width: 50%;
    vertical-align: top;
    background-color:red;
}

.column img {
  max-width:100%;  
  display: block;
 }

.info {
    background-color: blue;
    padding-bottom: 25px;
}

.link {
    display: block;
    position: absolute;
    left: 50%;
    bottom: 3%;
    color: yellow;
}

小提琴：

这是表格单元格的尝试;和一个相对的内部容器： http://jsfiddle.net/BuuFv/98/

TRIES AND FRUSTRATIONS：

1） - 显示表

由于FF问题，我无法将其拉出来。

尝试使用额外的相对父容器

  但是左图像根据它在FF上的容器没有缩小。

尝试给予身高：100％

http://davidwalsh.name/table-cell-position-absolute    但是也没有用，图像不会缩小或扩展使用max-width;

2 - 巨大的正填充和负边际值

不起作用，因为绝对定位的元素不会留在原位。

3 - 人造柱

似乎有任何帮助，因为我们没有使用纯色背景，而是在左栏上有图像。

图片：

请帮忙吗？

Answer 1

1） 在这种情况下，添加一个具有位置相对属性（.inner）的额外相对容器就可以了。

2） 图像在FF上没有缩小或增长的事实是因为它没有考虑max-width声明应该这样做。

修正：

.inner {
    width: 100%;
    display: table;
    table-layout:fixed; /* <<-- ADD */
}

table-layout fixed算法使Firefox识别单元格中的max-width，这会让图像缩小。

此解决方案的积分应与Paul O'B分享。

Answer 2

http://jsfiddle.net/BuuFv/75/

您可以尝试将链接从绝对位置更改为另一个表格单元格。不是100％用于你的用例，但它似乎完成了你的要求。

.link {
    height:100px;
    display:table-cell;
    vertical-align:bottom;
    color: yellow;
}

Answer 3

以下是我的观点http://jsfiddle.net/E6UDD/

所以基本上，解开填充和负边距黑客，并将列的高度添加到相同的数量。

然后，将相对定位添加到.column。

然后，绝对定位链接的位置应为top: 50%以使其位于最底部，或44％以模仿您最初所入的3％。

Answer 4

DEMO

.wrapper {
    position:relative;
    overflow: hidden;
    white-space:nowrap;
    outline:1px solid red;
    height:auto;
}
.column {
    position:relative;
    display:inline-block;
    vertical-align:top;
    background-color:red;
    width:50%;
}
.column img {
    max-width:100%;
    min-width:30px;
    min-height:20px;
}
.info {
    position:absolute;
    bottom:0;
    top:0;
    background-color: blue;
}
.link {
    clear:left;
    display: block;
    position: absolute;
    bottom: 3%;
    color: yellow;
}