2

我有一个包含多个链接的网页，其中包含一个中等大小的图像和一个简短的描述性文本。虽然所有图像都具有相同的大小（目前），但文本来自翻译并且可能跨越可变数量的行，具体取决于文本长度。

就像在工具栏中一样，所有链接必须具有相同的高度。特别是背景悬停高亮必须显示所有项目的相同高度，当然链接敏感区域必须与背景高亮匹配，因此实际<a>元素需要具有该高度。

我知道我可以使用 JavaScript 来确定链接项目的最大高度，并将其作为固定高度应用于所有项目。但我会尽量避免为此使用 JavaScript 并仅依赖 CSS。

我最初的尝试是为此使用表格并使链接扩展到整个行单元格的高度，但这不起作用（没有效果）。

所以这里还有一些没有表格的东西也不起作用：

<!doctype html>
<html>
<head>
<style>
a
{
    display: inline-block;
    height: 100%;
    background: #eeeeee;
    border: dotted 1px red;
}
</style>
</head>

<body>

<a>
Line 1<br>
Line 2<br>
Line 3<br>
</a>

<a>
Line 1<br>
</a>

<a>
Line 1<br>
Line 2<br>
</a>

</body>
</html>
4

2 回答 2

4

您可以做的是将它们包装在带有table显示的容器中，并为每个锚元素提供table-cell显示：

<div class="table">
    <a>
        Line 1<br>
        Line 2<br>
        Line 3<br>
    </a>

    <a>
        Line 1<br>
    </a>
</div>

样式使用：

div.table {
    display:table;
}

div.table a {
    display:table-cell;
}

JSFiddle 演示。

于 2013-10-22T11:24:30.793 回答
0

这个表怎么样

<table>
    <tr>
        <td>
            <a>
                Line 1<br>
                Line 2<br>
                Line 3<br>
            </a>
        </td>
        <td>
            <a>
                Line 1<br>
            </a>
        </td>
        <td>
            <a>
                Line 1<br>
                Line 2<br>
            </a>
        </td>
    </tr>
</table>

见小提琴

于 2013-10-22T11:23:24.443 回答