Многострочная ссылка с изображением

Question

Я не разрабатывал веб-страницы / приложения более 15 лет, и многое изменилось. Я работаю в Visual Studio 2019, ASP. NET и страницах бритвы ...

Я хотел бы создать набор ссылок, которые имеют рамку и переносятся, если на экране нет достаточно широк. Я думал, что это будет что-то простое, но я не могу понять это. Я потратил на это целую неделю, и, возможно, я не ищу правильные термины, или я не знаю, что я ищу.

Я могу приблизиться к таблице, что-то вроде (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>

Есть 2 проблемы с текущим подходом ...

1. Не переносится, когда ширина экрана слишком мала
2. Только описание элемента доступно для клика

Я помещаю изображение на задний план, потому что некоторые значения в тексте (item.Test1, item.Test2), pu sh текст слева с наложением изображения.

Есть предложения?

Возможно, укажите мне код для динамического создания изображения того, что я ищу (я бы предпочел решение CSS, но создание изображения было бы приемлемым).

Answer 1

Ответ, который я наконец-то придумал, состоял в том, чтобы отбросить таблицу, обернуть ссылки (кнопки) в абзац, заменить тег td на кнопку, присвоить ему onclick = 'location' и сохранить тот же стиль и вложенную таблицу. layout.

Теперь кнопки переносятся для экранов разных размеров и выглядят так же, как и старые, которые были обернуты в таблицу.