Question

鉴于makup看起来像这样：

<div>
    <span> a </span>
    <span class="oddOneOut"> [XYZ] </span>
    <span> b </span>
    <span> c </span>
</div>

有没有办法，只使用CSS，强制[XYZ]节点始终显示为右下角的最后一项，如下例所示？

+--------------+
| a b c  [XYZ] |
+--------------+

+--------------+
| a b c d e f g|
| h i    [XYZ] |
+--------------+

如果没有直接的解决方案，我也会对其他方式感兴趣以达到同样的效果

Answer 1

div
{
    position: relative; /* make absolute children be absolute inside of it. */
}

div .oddOneOut
{
    position: absolute;
    bottom: 5px;
    right: 5px;
}

填充可能需要稍微调整一下。关键是要使用绝对定位。

Answer 2

是一种实现此行为的方法，以及您在接受的答案的评论中所需的所有定位规定，所有这些都只使用CSS。

解决方案在于使用新的box-sizing: border-box属性来更改CSS框模型的工作方式。使用box-sizing: border-box，您可以使用填充，就像它是插入间距一样。因此，如果将容器元素的padding-bottom指定为绝对定位的子元素的height，则兄弟元素将不会位于绝对定位的子元素下面。

请参阅my jsfiddle进行演示。

Answer 3

你可以让它浮动，包括第二个跨度的CSS：

浮动：右

使用CSS在其兄弟节点之后显示节点

3 个答案: