css - 等高列上的绝对位置元素 - 怎么样？

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;
}

fiddle 演奏:

下面是table-cell的尝试；和一个相关的内部容器: http://jsfiddle.net/BuuFv/98/

尝试与挫折:

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 分享此解决方案的来源。