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

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