所以我一直试图在一个有 2 列的段落中插入一个标题。但是在 para 标签内插入标题后，“column-span”无法工作。但是在将“p”标签更改为“div”时，“column-span”确实有效。
我知道您可能认为我们可以在段落之前添加标题来达到预期的效果。但是我们也可以在 div 标签中做到这一点。
所以我的问题是为什么将 div 标签更改为 p 标签不能产生相同的结果。
看看:
p {
column-count: 2;
column-width: 100px;
}
h1 {column-span: all
}
<p class="newspaper">
<h1>Lorem ipsum dolor sit amet</h1>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</p>
把'p'改成div看看效果。
任何关于为什么会发生这种情况的建议肯定会受到赞赏。谢谢。
最佳答案
h1 元素不是 p 的有效子元素(参见 p – paragraph )。 p 只接受 Phrasing content .
A p element’s end tag may be omitted if the p element is immediately followed by [...]h1[...], or if there is no more content in the parent element and the parent element is not an a element.
因此，如果您将 h1 放在 p 中，则 p 会在 h1 之前立即关闭标签。
解析 html 后，生成的 DOM 结构如下所示:
<p class="newspaper">
</p><h1>Lorem ipsum dolor sit amet</h1>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
关于html - "column-span: "未被应用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39180165/