Как разместить изображение внутри тега p, который находится под другим тегом p

Question

Я использую Quill Editor.и хранение данных внутри БД MySQL вместе с тегом HTML.

Пример:

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

Теперь, когда я использую угловой код, я использовал приведенный ниже код, воспроизводящий ту же структуру HTML, которую я сохранилранее в DB.

<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 сообщения в allposts

[![<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>

, это даже не имеет значения (да, я проверил свои инструменты веб-разработки, и он работает отлично).Поэтому возникает вопрос, почему я не смог добавить стиль к своему тегу изображения с помощью

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

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

, потому что angular не поддерживает это для содержимого innerHTML до тех пор, пока вы не добавите приведенный ниже код в свой файл component.ts

  encapsulation: ViewEncapsulation.None,