Question

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

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

我知道解决这个问题的三种方法

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

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

缺点： 我的经验（不知道为什么）是像素数量因浏览器而异。这使得内容下拉到某些浏览器的下一行。

div{
  height: 100px
}    
p{

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

Con：这个问题是我希望包含元素的高度由p或img的高度设置，以较高者为准。随着浮动，他们得到height: 0

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

Con：这个依赖于左侧元素的高度，还需要更新才能使其在移动设备上运行。（通常，这样的内容往往放在彼此之上）

您使用什么方法？还有更好的方法吗？

Answer 1

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

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

Answer 2

我经常做

表示左元素

 display:inline-block;

表示正确的元素

 float:right;

它都重置并安排花车。如果我左边没有任何东西，我只是为左边创建一个空元素，然后以相同的方式向右浮动

Answer 3

我认为你的第一种方法更好。关于浏览器之间的像素差异，由于标签之间的空白区域。您可以通过注释掉下面的空格来解决这个问题：

HTML：

<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/

Answer 4

我通常会选择这样的东西

HTML

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

CSS

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

DEMO

Answer 5

关于您的内联块解决方案：您的<p>和<img>之间有空格（是的，换行+标签也计为空格），这会使<div>内所有内容的计算大小变为100px。（<p> +“”+ <div>）

我认为大多数人倾向于使用floating，因为它易于使用且唯一的缺点，正如您所提到的那样是父崩溃。为避免这种情况，clearfixes是您应该阅读的内容。

我应该如何将一个元素与右边的元素对齐，并将一个元素对齐到包含元素内部？

5 个答案: