Css 在包含元素的内部，如何将一个元素向右对齐，将一个元素向左对齐？

这对我来说是很常见的情况：

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

由于容器的大小与包含块完全匹配，因此正确的内容将与正确的边缘对齐

Con: 我的经验（不知道为什么）是不同浏览器的像素数不同。在某些浏览器中，这会使内容下拉到下一行

div{
  height: 100px
}    
p{

  float: left;
}
img{
  float: right;
}

Con:这个问题是，我希望包含元素的高度由p或img的高度设置，以较高者为准。通过浮动，它们得到

高度：0

div{
  display: relative;
}
p{
  width: 70px;
}
img{
  display: aboslute;
  right: 0
}

Con:这一功能取决于左侧元素的高度，而且需要更多的工作才能在移动设备上进行更新。（通常，这样的内容往往放在彼此的顶部）

你用什么方法？有更好的办法吗？

我通常有

对于左元素

 display:inline-block;

对于右元素

 float:right;

---

它可以重置和安排浮动。如果左边没有任何内容，我只为左边创建一个空元素，然后以相同的方式浮动右边

我认为第一种方法更好。关于不同浏览器的像素差异，这是由于标签之间的空白。您可以通过如下注释空白来解决此问题：

HTML:

---

演示：

我通常会选择这样的东西

HTML

---

关于内联块解决方案： 您的

和

之间有空格（是的，换行符+制表符也算作空格），这使得

中所有内容的计算大小都变大为100px。（

+“”+

）

---

我认为大多数人倾向于使用，因为它很容易使用，而且唯一的缺点，正如你提到的，是父级崩溃。为了避免这种情况，您应该阅读以下内容。

您可以将div设置为

显示：flex

，并将图像设置为

对齐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>

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

<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;
}

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