HTML5继承（标签？）问题

我想在HTML5中创建lightbox结构

这是我的密码：

<p>
   <a href="images/1.jpg" class="lightbox">
      <img src="images/1.jpg" style="width: 320px; height: 200px" alt="" />
      <div class="zoom">Zoom.</div>
      test test
   </a>
   Paragraph text.        
</p>

段落案文。

现在，“zoom”div和“test test”文本应该是名为“lightbox”的链接的子项，但浏览器将上述代码呈现为三个单独的链接（这怎么可能呢？）

正文

以下是JSFIDLE：

---

我100%确定标记有问题，但我找不到任何东西。

将

设置为

的子元素是无效的，除非将

设置为块级元素

---

不管怎样，在

标记中包含任何块级元素（如

）都是无效的。

有效性永远不取决于样式。如果

在

元素的父元素中有效，则

可以（在HTML5中）是

的子元素。此外，有效性并不是HTML解析行为的特别好的指南。例如，

在

中无效，但如果用

代替

，则不会发生此问题。尽管如此，你的第二段是相关的，并且足够接近。好吧，如果我有一段文字和图片，那么应该怎么做呢？如果图像是段落的一部分，那么将其放在里面有什么不对？我知道img！=div，但有时您需要div来执行悬停覆盖、标题或其他操作。@user1461645-img是内联元素，div是块元素。您应该使用span而不是div来包装或代替img。然后可以适当设置跨度图元的样式。

<p>
   <a href="images/1.jpg" class="lightbox">
      <img src="images/1.jpg" style="width: 320px; height: 200px" alt=""/>
   </a>
</p>
<div class="zoom">
   <a href="images/1.jpg" class="lightbox">Zoom.</a>
</div>
<a href="images/1.jpg" class="lightbox"> test test </a>
   Text 
<p/>