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>

图像具有不同的比例，一些肖像，一些横向。拇指的最大尺寸为150px（宽或高），它们总是150px宽或高。

我希望所有图片都与其父.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>

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

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

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

然而，由于.row div随其包含的图像动态增长，它实际上具有我试图用我的身高引用的高度：a标签为100％。但由于某种原因，它不起作用。

为什么呢？我在这里不理解什么，怎么做？在转到这里之前，我花了很多时间在这里，希望有人有更好的答案。

Answer 1

使用inline-block代替浮动可能更容易。像这样：

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

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

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

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

1 个答案: