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

Question

我在span标签中有3个标签(x,y和z)div,其中span z是div中的最后一个跨度.我希望span z中的文本显示在div的右下角.我怎样才能做到这一点？

我尝试了以下代码,但它不起作用:

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

Answer 1

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

把它变成一个div style="position:absolute;right:0;bottom:0;text-align:right'

确保包含div必须style="position:relative;"包含绝对对象.

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

编辑

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

SPAN与DIV(内联块)

Answer 2

与 @RSG 所说的基本相同，但是您可以使用 aspan而不是将其转换为DIV. 分配父容器，然后使用以下 cssposition:relative进行分配：span.z

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