Question

我有一个显示信息的瓷砖, 但也需要一个链接。如果用户点击瓦砖的任何地方, 它需要将其带入适当的操作。

下面是我所创造的图象。

""https://i.stack.imgur.com/vNGDU.png" alt="在这里输入图像描述"/ >

HTML HTML

    <div class="tile">
        <div class="tile-text">Runs</div>
        <div class="tile-text details">Manage runs, routes, races, and goals</div>
        <div id="runs" class="tile-text live">You have a four mile run today</div>
    </div>

现在,如果我创建一个“行动链接”,它就会创造蓝色的瓷砖, 但我不确定如何在“行动链接”中获得三个孩子的分母。

我尝试了以下ActionLink:

@Html.ActionLink("Runs", "Index", "Run", null, new { @class = "tile-text" })

这将创建以下图像 :

""https://i.stack.imgur.com/J8PKI.png" alt="在这里输入图像描述"/ >

基本上,我怎样才能把瓷砖连接到行动上, 并且仍然拥有它里面的所有三个孩子的分母呢?

Answer 1

您可以在 tile ; , 并用 cursor: 指针 来使其看起来像链接。

示例:

<div class="tile" onclick="window.location.href= link ">
    <div class="tile-text">Runs</div>
    <div class="tile-text details">Manage runs, routes, races, and goals</div>
    <div id="runs" class="tile-text live">You have a four mile run today</div>
</div>

或者您可以使 tile ;div> 成为 lt;a> 元素,并把它样式为 display: block 并包含相应的 width 和 ,然后将其所有子元素 lt;span> 与 display: blude 。



示例:

<style type="text/css">
    .tile, .tile-text { display: block; }
    // You could add width and height to .tile if needed.
    // Also, if you want to put tiles next to each other, inline-block for .tile
    // would be more appropriate.
</style>

<a class="tile" href="link">
    <span class="tile-text">Runs</span>
    <span class="tile-text details">Manage runs, routes, races, and goals</span>
    <span id="runs" class="tile-text live">You have a four mile run today</span>
</a>

Answer 2

您需要将蓝色瓷砖作为真实图像。这个可点击的图像应该放在 div 中。

用 CSS, 您可以使用 z- index / 绝对定位, 将图像置于文本内容后面。

Answer 3

This is a quick implementation of Radu s option 2. All you need to do now is tidy it up and move the inline css into the css for your a class called title.

<body>  
<a class="tile" href="#" style="width: 200px; height: 300px; background-color: lightblue; display: block;">
    <h3 class="tile-text">Runs</h3>
    <p class="tile-text-details">Manage runs, routes, races, and goals</p>
    <p class="runs" class="tile-text-live">You have a four mile run today</p>
</a>
</body>

友情链接