将链接 包裹在

周围

是否可以包裹一个<a>标记周围<div>就像这样：

<a href=etc etc>
    <div class="layout">
        <div class="title">
        Video Type
            <div class="description">Video 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">
        Video Type
            <span class="description">Video description</span>
        </span>
    </span>
</a>

然后设计风格display: block

使用 JavaScript 和:hover:

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

并且（假设是 jQuery）

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

And

.layout:hover {
    // Hover effect
}

或者最后使用绝对定位来放置a用CSS锚定覆盖整个.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>

和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;
}

当然，这不适用于旧版本的 IE。