如何在另一个p标签下的p标签内放置图像

Question

我正在使用羽毛笔编辑器。并将数据与HTML标记一起存储在MySQL DB中。

示例：

<p>heading<p><p><img src=""></p>

现在，由于我使用的是角度，因此我在下面的代码中使用了与以前保存在DB中相同的HTML结构。

<div class="container-fluid">
    <h3 class="fancyFont">Hot Posts</h3>
    <div class="row justify-content-md-center">
        <div class="col-md" style="width: 100%">
            <div style="background:lightgray;">
                <div *ngFor="let post of allPosts">
                    <p [innerHTML]=post.postContent></p>
                </div>
            </div>
        </div>
    </div>
</div>

为了给它一个适当的样式，我使用了下面的CSS

p img{
    max-width: 100% !important;
}

p {
    margin: auto;
    padding: 16px;
    max-width:100%;
    display: inline block;
    word-break: break-all
} 

但是尽管这样做，我仍无法在p标签内调整图像大小或使图像合适。为了描述innerHtml，我可以说在纯HTML中看起来像这样

如果所有帖子中都有2个帖子

[![<div>
<p><p><h1>first post</h1></p></p>
<p><p><h1>Second post</h1><p><p>image</p><p>
<div>][1]][1]

Answer 1

p标记内的p可能对HTML 5无效，我同意这一点。由于很少有人已经给了我证据，所以我也亲自检查了它。但是对于Angular，当您使用innerHTML之类的

            <p [innerHTML]=post.postContent></p>

这甚至都没有关系（是的，我检查了我的Web开发工具，它工作得很好）。所以出现了一个问题，为什么我无法通过使用

为图像标签添加样式

p img{
    max-width:100% !important;
}

p {
    max-width:100%;
    word-break: break-all
}

因为innerHTML内容的角度支持，直到并且除非您在component.ts文件中添加以下代码，否则角度支持

  encapsulation: ViewEncapsulation.None,