Question

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

就像在工具栏中一样，所有链接都必须具有相同的高度。特别是背景悬停突出显示必须显示所有项目的相同高度，当然链接敏感区域必须与背景突出显示匹配，因此实际的<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>

Answer 1

您可以做的是将它们装在一个table display的容器中，并为每个锚元素显示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 demo

Answer 2

这张表怎么样？

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

请参阅Fiddle

使多个链接在一行中具有相同的动态高度

2 个答案: