换行链接< a>大约< div> [英] Wrap link <a> around <div>

问题描述

是否可以在< div> s周围包装< a> 标签，如下所示：

 < a href = etc etc> 
< div class =layout> 
< div class =title> 
视频类型
< div class =description>视频说明< / div> 
< / div> 
< / div> 
< / a> 
  

Eclipse告诉我div的位置不对吗？
如果不允许。我怎样才能让整个'布局'类成为一个链接？解析方案

该结构在HTML5中是有效的，因为在HTML5锚几乎可以包装除了其他锚和窗体控件以外的任何元素。现在的大多数浏览器都支持这个功能，并且会将问题中的代码解析为有效的HTML。下面的答案是在2011年编写的，如果您支持传统浏览器（*咳嗽* Internet Explorer *咳嗽*），可能会有用。

---

没有HTML5解析器的老浏览器（比如说Firefox 3.6）仍然会对此感到困惑， DOM结构。

HTML4的三个选项 - 使用所有内联元素：

 < ; a href = etc etc> 
< span class =layout> 
< span class =title> 
视频类型
< span class =description>视频说明< / span> 
< / span> 
< / span> 
< / a> 
  

然后使用 display：block

---

使用JavaScript和：hover ：

 < div class =layout> 
< div class =title> 
视频类型
< div class =description>视频说明< / div> 
< / div> 
< / div> 
  

并且（假设jQuery）

<$ p $点击（函数（）{
//做某事
}）：

和

  .layout：hover {
 //悬停效果
} 
  

---

或者最后使用绝对定位将 a 锚点放入CSS中以覆盖整个 .layout

 < div class =layout> 
< div class =title> 
视频类型
< div class =description>视频说明< / div> 
< / div> 
< a class =more_linkhref =somewhere>更多资讯< / a> 
< / div> 
  

和CSS：

  .layout {
 position：relative; 
} 
 
 .layout .more_link {
 position：absolute; 
 display：block; 
 top：0; 
 bottom：0; 
剩下：0; 
 right：0; 
 text-indent：-9999px; 
 z-index：1000; 
} 
  

当然，这对老版本的IE无效。

Is it possible to wrap an <a> tag around <div>s like so:

<a href=etc etc>
    <div class="layout">
        <div class="title">
        Video Type
            <div class="description">Video description</div>
        </div>
    </div>
</a>

Eclipse is telling me the div's are in the wrong place? If this is not allowed. How can I make the entire 'layout' class become a link?

解决方案

That structure would be valid in HTML5 since in HTML5 anchors can wrap almost any element except for other anchors and form controls. Most browsers nowadays have support for this and will parse the code in the question as valid HTML. The answer below was written in 2011, and may be useful if you're supporting legacy browsers (*cough* Internet Explorer *cough*).

---

Older browsers without HTML5 parsers (like, say, Firefox 3.6) will still get confused over that, and possibly mess up the DOM structure.

Three options for HTML4 - use all inline elements:

<a href=etc etc>
    <span class="layout">
        <span class="title">
        Video Type
            <span class="description">Video description</span>
        </span>
    </span>
</a>

Then style with display: block

---

Use JavaScript and :hover:

<div class="layout">
    <div class="title">
    Video Type
        <div class="description">Video description</div>
    </div>
</div>

And (assuming jQuery)

$('.layout').click(function(){
    // Do something
}):

And

.layout:hover {
    // Hover effect
}

---

Or lastly use absolute positioning to place an a anchor with CSS to cover the whole of .layout

<div class="layout">
    <div class="title">
    Video Type
        <div class="description">Video description</div>
    </div>
    <a class="more_link" href="somewhere">More information</a>
</div>

And CSS:

.layout {
    position: relative;
}

.layout .more_link {
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-indent: -9999px;
    z-index: 1000;
}

This won't work with older versions of IE, of course.

这篇关于换行链接&lt; a&gt;大约&lt; div&gt;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！