帶圖像的多行鏈接

Question

我已經超過 15 年沒有開發網頁/應用程序了，而且發生了很多變化。 我在 Visual Studio 2019、ASP.NET 和 razor 頁面中工作...

如果屏幕不夠寬，我想創建一組帶有邊框和換行的鏈接。 我認為這會很簡單，但我無法弄清楚。 我花了整整一周的時間在這上面，也許我沒有在尋找正確的術語，或者我真的不知道我在尋找什么。

我可以接近一張表格，例如（1 行，多個單元格）：

<td style="
                width:128px;
                height:80px;
                border:2px solid black;
                font-size:xx-small;
                background-repeat:no-repeat;
                background-size:64px;
                background-image:url(/Icons/@item.Icon);
            ">
    <table>
        <tr><td style="text-align:right; width:120px"><b>A1: @item.Test1</b></td></tr>
        <tr><td style="text-align:right;"><b>A2: @item.Test2</b></td></tr>
        <tr><td style="text-align:right;"><b>@item.Note1</b> &nbsp;<img src="/Icons/@item.State1a" height="8" width="8" />&nbsp;<img src="/Icons/@item.State2a" height="8" width="8" /></td></tr>
        <tr><td style="text-align:right;"><b>@item.Note2</b> &nbsp;<img src="/Icons/@item.State1b" height="8" width="8" />&nbsp;<img src="/Icons/@item.State2b" height="8" width="8" /></td></tr>
    </table>
    <a href="/Details?item=@item.Id">
        @item.Description
    </a>
</td>

目前的方法有兩個問題......

1. 屏幕寬度太小時不回繞
2. 只有項目描述是可點擊的

我將圖像放在背景中，因為文本中的某些值（item.Test1、item.Test2）將文本推到左側覆蓋圖像。

有什么建議？

也許指出我來動態生成我正在尋找的圖像的代碼（我更喜歡 CSS 解決方案，但創建圖像是可以接受的）。

Answer 1

我最終想出的答案是放下表格，將鏈接（按鈕）包裝在一個段落中，用按鈕替換 td 標簽，給它一個 onclick='location'，並保持相同的樣式和子表格布局。

現在，這些按鈕可以針對不同的屏幕尺寸進行包裹，並且具有與包裹在表格中的舊按鈕相同的外觀和感覺。