我在P和div标签中有一个h2标签，不知怎的，它使我的段落的样式无法正常工作。在下面的示例中，没有h2标记的第一段表现如预期。但是，只要我在其余段落中添加了h2标签，就会破坏我的风格。
.column-4-layout .left-column P h2 {
display: inline-block;
padding: 0;
margin: 0;
color: yellow;
}
.column-4-layout .left-column P {
width: 470px;
margin-top: 50px;
color: red;
}
.column-4-layout .left-column P img {
width: 227px;
padding-right: 15px;
padding-bottom: 5px;
float: left;
}
.column-4-layout .right-column P {
width: 470px;
margin-top: 50px;
}
.column-4-layout .right-column P img {
width: 227px;
padding-right: 15px;
padding-bottom: 5px;
float: left;
}<div class="column-4-layout">
<div class="left-column">
<P>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/189477/sample-image.jpg" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id erat ultrices metus ornare elementum vel vitae odio. Vivamus feugiat eros sit amet aliquet efficitur. Vestibulum massa ligula, ullamcorper vitae malesuada et, viverra nec metus. Integer
at felis non odio interdum finibus sed ac purus. Vestibulum gravida lorem a augue faucibus, eget auctor lorem porta. Fusce vitae nibh laoreet, ultrices orci cursus, suscipit diam. Praesent vestibulum tellus ornare, gravida diam vel, sodales elit.
Sed lacus augue, pulvinar vel ornare vel, molestie nec diam. Sed vestibulum sed odio in vulputate. Suspendisse ut lacus sit amet dui porttitor convallis. Vestibulum mattis laoreet nulla luctus facilisis. Nunc efficitur ligula sagittis lectus commodo
molestie. Maecenas fringilla ipsum at est venenatis suscipit. Suspendisse quis pellentesque ligula. Sed quis ante nulla.</P>
<P>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/189477/sample-image.jpg" />
<h2>Subgroup title</h2> Nullam euismod bibendum eleifend. Aliquam pulvinar rhoncus elit et ullamcorper. Proin vel nisl ligula. Quisque pellentesque, ipsum sollicitudin finibus faucibus, massa orci luctus purus, sed interdum odio leo ut dui. Phasellus a mi non tellus faucibus
mattis. Morbi iaculis ac lorem lobortis elementum. Nunc sagittis libero et orci consequat iaculis. Duis magna arcu, consequat vel mollis non, elementum nec lacus. Etiam commodo in arcu sit amet ultrices. Sed massa magna, luctus in lacinia vel, congue
a elit. Integer lacinia ornare ligula, ut ultricies metus elementum ut. Quisque placerat arcu id metus congue egestas. Curabitur mollis sem vel tortor convallis consectetur.</P>
<P>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/189477/sample-image.jpg" />
<h2>Subgroup title</h2> Curabitur rhoncus tellus a pulvinar consequat. In sagittis gravida erat, id finibus est molestie non. Mauris dignissim pretium elementum. Sed a arcu vel lectus facilisis viverra. Vestibulum faucibus risus nec lorem scelerisque eleifend. Donec et
consectetur tellus. Vestibulum in dictum ligula, ut commodo quam. In in justo a nisl pretium faucibus non sit amet lacus. Morbi pharetra vestibulum tristique. Sed sem lorem, egestas a pharetra quis, aliquam quis sem. Integer fermentum est nisl,
eu finibus tellus gravida nec. Etiam egestas tincidunt justo, et auctor tellus interdum sed. Sed in orci id metus sollicitudin accumsan at ut neque. Ut lacinia ultrices justo, ac dictum sapien luctus non. Etiam blandit congue accumsan.</P>
<P>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/189477/sample-image.jpg" />
<h2>Subgroup title</h2> Nullam nulla ante, eleifend at lectus id, ultrices vehicula lorem. Pellentesque vel tempor massa. Praesent pulvinar sem ultricies nibh tincidunt tincidunt. Vestibulum sapien mauris, porta in semper sit amet, fermentum vel elit. Nullam sapien magna,
faucibus eu elit eu, congue suscipit est. Sed vitae gravida turpis, pretium finibus ex. Suspendisse lacinia condimentum erat, id condimentum erat molestie et. In rutrum luctus condimentum. Sed lacinia congue neque eget suscipit. Integer sed massa
luctus, efficitur ante et, sagittis est. Cras efficitur neque sed libero euismod cursus. Phasellus ac tincidunt metus. Fusce et turpis nisl. Ut in mattis ipsum. Donec ornare pharetra neque.</P>
</div>
<div class="right-column">
<P>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/189477/sample-image.jpg" />
<h2>Subgroup title</h2> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id erat ultrices metus ornare elementum vel vitae odio. Vivamus feugiat eros sit amet aliquet efficitur. Vestibulum massa ligula, ullamcorper vitae malesuada et, viverra nec metus. Integer
at felis non odio interdum finibus sed ac purus. Vestibulum gravida lorem a augue faucibus, eget auctor lorem porta. Fusce vitae nibh laoreet, ultrices orci cursus, suscipit diam. Praesent vestibulum tellus ornare, gravida diam vel, sodales elit.
Sed lacus augue, pulvinar vel ornare vel, molestie nec diam. Sed vestibulum sed odio in vulputate. Suspendisse ut lacus sit amet dui porttitor convallis. Vestibulum mattis laoreet nulla luctus facilisis. Nunc efficitur ligula sagittis lectus commodo
molestie. Maecenas fringilla ipsum at est venenatis suscipit. Suspendisse quis pellentesque ligula. Sed quis ante nulla.</P>
<P>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/189477/sample-image.jpg" />
<h2>Subgroup title</h2> Nullam euismod bibendum eleifend. Aliquam pulvinar rhoncus elit et ullamcorper. Proin vel nisl ligula. Quisque pellentesque, ipsum sollicitudin finibus faucibus, massa orci luctus purus, sed interdum odio leo ut dui. Phasellus a mi non tellus faucibus
mattis. Morbi iaculis ac lorem lobortis elementum. Nunc sagittis libero et orci consequat iaculis. Duis magna arcu, consequat vel mollis non, elementum nec lacus. Etiam commodo in arcu sit amet ultrices. Sed massa magna, luctus in lacinia vel, congue
a elit. Integer lacinia ornare ligula, ut ultricies metus elementum ut. Quisque placerat arcu id metus congue egestas. Curabitur mollis sem vel tortor convallis consectetur.</P>
<P>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/189477/sample-image.jpg" />
<h2>Subgroup title</h2> Curabitur rhoncus tellus a pulvinar consequat. In sagittis gravida erat, id finibus est molestie non. Mauris dignissim pretium elementum. Sed a arcu vel lectus facilisis viverra. Vestibulum faucibus risus nec lorem scelerisque eleifend. Donec et
consectetur tellus. Vestibulum in dictum ligula, ut commodo quam. In in justo a nisl pretium faucibus non sit amet lacus. Morbi pharetra vestibulum tristique. Sed sem lorem, egestas a pharetra quis, aliquam quis sem. Integer fermentum est nisl,
eu finibus tellus gravida nec. Etiam egestas tincidunt justo, et auctor tellus interdum sed. Sed in orci id metus sollicitudin accumsan at ut neque. Ut lacinia ultrices justo, ac dictum sapien luctus non. Etiam blandit congue accumsan.</P>
<P>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/189477/sample-image.jpg" />
<h2>Subgroup title</h2> Nullam nulla ante, eleifend at lectus id, ultrices vehicula lorem. Pellentesque vel tempor massa. Praesent pulvinar sem ultricies nibh tincidunt tincidunt. Vestibulum sapien mauris, porta in semper sit amet, fermentum vel elit. Nullam sapien magna,
faucibus eu elit eu, congue suscipit est. Sed vitae gravida turpis, pretium finibus ex. Suspendisse lacinia condimentum erat, id condimentum erat molestie et. In rutrum luctus condimentum. Sed lacinia congue neque eget suscipit. Integer sed massa
luctus, efficitur ante et, sagittis est. Cras efficitur neque sed libero euismod cursus. Phasellus ac tincidunt metus. Fusce et turpis nisl. Ut in mattis ipsum. Donec ornare pharetra neque.</P>
</div>
答案 0 :(得分：2)
p elements只能包含phrasing content。
如果您查看此代码段的控制台日志，您将只看到“这是一个”：
console.log(document.querySelector('p').innerHTML);<p>This is a <h2>test</h2>.</p>
答案 1 :(得分：0)
如果您阅读本文https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p，您会发现p标签内不允许使用h2标签。 事实上，如果您使用浏览器检查HTML，您可以看到p标签在h2元素之前关闭。 尝试使用DIV更改段落
答案 2 :(得分：0)
您滥用标题标记。实际上，根据W3C，P元素只能包含此处列出的其他元素：Phrasing Elements。
这是搜索引擎（特别是谷歌）不赞成的事情。它不会是最明目张胆的黑帽技术，但感觉是在你的页面上没有任何东西是颠覆性的，例如：标题应该是标题，而不是段落的一部分。