Question

我在span标记中有3个div标记（x，y和z），其中span z是div中的最后一个范围。我希望span z中的文本显示在div的右下角。我怎么能这样做？

我尝试过以下代码，但不起作用：

<span align="right" style="font-size: 0.76em;" >my text here</span>

Answer 1

span不是块级元素，所以我认为你不能相对于另一个元素定位它。

将其设为style="position:absolute;right:0;bottom:0;text-align:right'

的div

确保包含div的style="position:relative;"包含绝对对象。

JSfiddle：http://jsfiddle.net/gHZqs/

修改

您可以使用span标记而不是div，正如其他人所说的那样。但是，span标记用于内联内容。如果您使用绝对定位从流中取出内容，那么您应该使用div IMO。如果你在一个框架或某个东西中工作而你需要使用span标记，那么我就不会失去任何睡眠。以下是类似问题的链接：

SPAN vs DIV (inline-block)

Answer 2

与@RSG大致相同但是您可以使用span而不是将其转换为DIV。分配父容器position:relative，然后为span.z分配以下css：

span.z{
    position:absolute;
    bottom:0;
    right:0;
}

请参阅此处的工作示例：http://jsfiddle.net/crYaw/1/

<强> HTML：

<div id="container">
    <p>Test here. Test here. Test here. Test here. Test here. Test here. Test here. Test here. </p>
    <p>This is some <span class="x">more</span> text</p>
    <p>This <span class="y"is some</span> >more text</p>
        <span class="z">Float me bottom right</span>
</div>

<强> CSS：

#container{
    position:relative;
    width:500px;
    height:200px;
    background-color:#eee;
}

span.x{
    font-weight:bold;
}

span.y{
    color:red;
}

span.z{
    position:absolute;
    bottom:0;
    right:0;
}

Answer 3

可以使用text-align css值，但它仅适用于块级元素和块级元素内的内容（在本例中为div）。由于您不希望div中的所有项目都与右侧对齐，因此您可以{z}跨度float:right;将其包装在另一个具有text-align:right;的div中。以下是两种解决方案：

http://jsfiddle.net/y9pvv/1/

将跨度放在div中的特定位置

3 个答案: