带换行符的行内段元素不保持行内式

我有一个包含图像和div（其中包含文本）的div。该文本包含标题和附加内容，以换行符分隔。有关示例，请参阅下面或附带的codepen。

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

这里是我的code pen

当我申请在线的显示风格到内部的div，标题是内嵌在图像的底部和断行下面的文本是图像的下方。此外，如果我用段落标签包装文本，则所有文本都在图片下方。

我希望标题出现在图像的顶部和右侧，并且内部div的所有内容保持在该对齐位置，即使文本延伸超过图像的高度。此外，未来我将在已经存在的文本下方的内部div中添加一个带有额外图像和更多文本的div，并且希望该内容保持相同的对齐方式。

这是我的最终目标：

Desired Result

而我想要的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>

来源

2014-12-31 NewbornCodeMonkey

好像显示：inline-block的将内嵌在它与图像，但在某些情况下，其中的文字较长下面的显示，它仍然不会引起文字从图像的右上角开始 – NewbornCodeMonkey

看来我已经找到了解决办法。

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

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

我codepen：Code pen

来源

2014-12-31 18:50:54 NewbornCodeMonkey

带换行符的行内段元素不保持行内式

回答

相关问题