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

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

小提琴演奏：

这是使用 table-cell 的尝试；和一个相对的内部容器： http://jsfiddle.net/BuuFv/98/

尝试和挫折：

1) - 显示表格

由于 FF 问题，对于相同的高度，我无法将其拉出。

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

但左图像不会根据它在 FF 上的容器缩小。

尝试给出高度：100%

http://davidwalsh.name/table-cell-position-absolute 但也没有用，图像不会使用最大宽度缩小或扩展；

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/E6UDD/

所以基本上，取消注释填充和负边距黑客，并将列的高度添加为相同的数量。

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

然后，绝对定位链接的位置应该是 top: 50% 以使其位于最底部，或 44% 以模仿您最初缩进的 3%。

Answer 3

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

Answer 4

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

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

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