html - 带换行符的内联段落元素不保持内联

Question

所以我的问题如下。

我有一个包含图像和 div(其中包含文本)的 div。文本包含标题和附加内容，由换行符分隔。有关示例，请参见下文或我随附的代码笔。

<div class="outer">
  <img src="something.com/pic.png">
  <div class="inner">
    Title<br>Additional text.
  </div>
</div>

这是我的 code pen

当我将内联显示样式应用于内部 div 时，标题与图像底部内联，换行符后的文本位于图像下方。此外，如果我将文本包裹在段落标签中，则所有文本都位于图像下方。

我希望标题显示在图像的顶部和右侧，并且内部 div 的所有内容保持该对齐方式，即使文本超出图像的高度也是如此。此外，将来我将在内部 div 中的现有文本下方添加一个带有附加图像和更多文本的 div，我希望该内容保持相同的对齐方式。

这是我的最终目标:

以及我想要的 html 结构:

<div>
    <img>
    <!--Start right indent (from top right of image) -->
    <div>
        <p>Title<br>text</p>
        <div>
            <img>
            <div>
                <p>Title<br>text</p>
            </div>
        </div>
    </div>
    <!--End right indent -->
</div>

Answer 1

看来我找到了解决方案。

.post img{
  display:inline-block;
  vertical-align: top;
}

.post_content{
  display:inline-block;
  width: 90%;
}

我的代码笔:Code pen