HTML 内容在加载时从一个段落移动到多个段落

Question

我有一个简单的网页，其中包含一个内容 div、其中的一个段落以及其中的标题、文本和图像。 html 看起来像这样:

<div id="content">
    <p>
        <img class="coverR" src="img/img.jpg">
        <h1>Header</h1>
        Insert description here
    </p>
</div>

这些元素的 css 如下所示:

#content p {
    width: 100%;
    overflow: auto;
    text-indent: 2em;
    margin-bottom: 5px;
}

#content .coverR {
    width: 200px;
    margin: 5px;
    margin-right: 8%;
    float: right;
    clear: left;
}

这一切看起来都很好，但是当我打开 chrome 检查器并查看 HTML 时，它看起来像这样:

这破坏了我的页面流，我不知道为什么会这样。我在做一些非常愚蠢的事情吗？

Answer 1

• 段落的结束标记是可选的。
• 段落不能包含标题，只能包含phrasing content .

因此标题隐含地结束了段落，所以它和后面的所有内容都不在其中。

无法编写 HTML，因此标题位于段落中

---

使用更合适的元素。很难说出您应该使用什么，因为您的示例内容没有提供任何上下文。