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

Question

所以我的问题如下。

我有一个同时包含图像和 div（包含文本）的 div。文本包含标题和附加内容，由换行符分隔。请参阅下面或我随附的代码笔作为示例。

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

这是我的code pen

当我将 inline 的显示样式应用到内部 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