我通常都这样
用于左元素

display:inline-block;

右元素

float:right;

它可以重置和排列浮点数，如果我左边没有任何东西，我就创建一个空元素，然后用同样的方法浮动右边

你可以把div设为display: flex，把图像设为align-self: flex-end，这样就不会失去相对性。

div{
  display: flex;
}
p {
  width: 70px;
}
img {
  align-self: flex-end;
}

我认为你的第一种方法更好。关于浏览器之间的像素差异，这是由于标签之间的空白。你可以通过注解掉空白来解决这个问题，如下所示：
超文本：

<div><!--
    --><p>Left aligned element</p><!--
    --><img title="right aligned element" /><!--
--></div>

在css中，使用font-size:0作为container，并在需要的子元素中定义font-size。
CSS：

div{
    width: 100px;
    font-size:0
}
p{
  display: inline-block;
  width: 70px;
  font-size:12px;
}
img{
  display: inline-block;
  width: 30px
}

演示：http://jsfiddle.net/lotusgodkk/GCu2D/181/

我通常会选这样的
超文本标记语言

<div class="container">
    <div>
        <p>Left aligned element</p>
    </div>
    <div>
        <img title="right aligned element" />
    </div>
</div>

中央支助系统

.container {
    display: table;
    width: 100px;
}
.container > div {
    display: table-cell;
    vertical-align: top;
}
p {
    width: 70px;
}

DEMO

关于您的内联块解决方案：在<p>和<img>之间有空格（是的，换行符+制表符也算作空格），这使得<div>中所有内容的计算大小都大于100px。（<p> +““+ <div>）
我想大多数人倾向于使用floating，因为它很容易使用，唯一的缺点，正如你提到的，是父崩溃。为了避免这一点，clearfixes是你应该阅读的东西。

对我来说，最简单的方法是给予父元素display: flex和justify-content: space-between：

<div style="display: flex; justify-content: space-between;">
  <p>Left aligned element</p>
  <img title="right aligned element" />
</div>

这样，段落将移到左边，图像移到右边。

使用浮动

.left{
 float: left;
     }
   .right{
 float: right;
     }