CSS：将高度设置为父级的 100%

Question

我在 div 内的锚点内有一些行图像拇指，每行一个 div，如下所示：

<div class="row"><a><img></a><a><img></a><a><img></a></div>
<div class="row"><a><img></a><a><img></a><a><img></a></div>

图像具有不同的比例，有些是纵向，有些是横向。拇指的最大尺寸为 150 像素（宽或高），并且它们的宽度或高度始终为 150 像素。

我希望所有图像与其父 .row div 的底部对齐。 因此，如果连续有任何肖像，则任何风景都会在底部对齐，并在其上方留出一些空间。 为了让图像在底部对齐，我将它们绝对定位，并相对于它们的锚点 为此，我使用以下 CSS：

<style>
div.row {
    float: left;
    clear: both;
}

.row a {
    position: relative;
    float: left;
    width: 175px;
}

.row a img{
    position: absolute;
    bottom: 0px;
}
</style>

上面的工作正常并且符合预期，但它有一个我正在尝试修复的缺陷：它需要将相对定位的锚标记的高度设置为特定大小。

我不希望这样，因为如果一行仅包含横向拇指，我不希望它不必要地高。

我希望每个 .row div 都是它包含的最高图像的高度。

如果一行中只有风景，则该行的高度将是最高风景的高度。

我想我可以通过将元素的高度设置为 100% 来解决这个问题：

<style>
.row a {
    position: relative;
    float: left;
    width: 150px;
    height: 100%;   
}
</style>

这将是其父级 .row div 的 100%。但由于某种原因，只有当我指定 .row div 的高度时，这才有效，然后我遇到同样的问题（无论实际内容如何，​​所有行都等于高度：

<style>
div.row {
    float: left;
    clear: both;
    height: 150px;
}

.row a {
    position: relative;
    float: left;
    width: 150px;
    height: 100%;   
}
</style>

但是，由于 .row div 随其包含的图像动态增长，它实际上有我想要用我的高度来引用的高度：100%，但由于某种原因它不起作用，

为什么？ 在转向这里之前，我花了很多时间研究这个问题，希望有人能给出黄金答案。

Answer 1

使用inline-block而不是浮动可能更容易。像这样的东西：

http://jsfiddle.net/cvQAZ/1/

或者您需要链接吗实际上有相同的高度吗？然后尝试“表格”布局（IE6不支持）：

http://jsfiddle.net/DpvgR/1/