"列跨度:"没有被应用

时间:2016-08-27 10:37:22

标签: html css

所以我一直试图在一个有2列的段落中插入一个标题。但是当在标签内插入标题时," column-span"无法工作。但是在改变' p'标记为' div' " column-span"确实有效。

我知道你可能会认为我们可以在para之前添加标题以达到预期的效果。但我们也可以在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>

改变&#39; p&#39; div来看效果。

关于为什么会发生这种情况的任何建议都值得赞赏。感谢。

1 个答案:

答案 0 :(得分:3)

h1元素不是p的有效子元素(请参阅p – paragraph)。 p仅接受Phrasing content

  

如果p元素紧跟[...] h1 [...],或者如果父元素中没有更多内容且父元素不是a,则p元素的结束标记可以省略元件。

因此,如果您在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.