在同一個動態高度中連續創建多個鏈接

我有一個包含中等大小的圖像和下面的簡短描述性文本的多個鏈接的網頁。儘管所有圖像的大小都相同（現在），但文本來自翻譯，可能會跨越可變數量的行，具體取決於文本長度。在同一個動態高度中連續創建多個鏈接

就像在工具欄中一樣，所有鏈接必須具有相同的高度。尤其是背景懸停突出顯示必須顯示所有項目的相同高度，當然鏈接敏感區域必須與背景突出顯示匹配，因此實際元素需要具有該高度。

我知道我可以使用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>

來源

2013-10-22 ygoe

你可以做的是包起來一個容器與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。

來源

2013-10-22 11:24:30

可能是最簡單的方法。 –

那這臺

<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

來源

2013-10-22 11:23:24 Gab

@Marc Audet顯示塊不起作用。是的，如果您希望所有的具有相同的寬度，則可以將寬度：100px添加到a元素。最後，出於好奇，這種解決方案缺少什麼？ – Gab

在你的例子中，每個'a'將有不同的高度（分別是3,1,2行）。當你將鼠標懸停在它上面並添加背景顏色時，你會得到一個不同高度的塊。 OP希望'a'元素都具有相同的高度。 –

@Marc Audet看到我更新的小提琴，我添加了：hover – Gab

在同一個動態高度中連續創建多個鏈接

回答

相關問題