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

Question

I have 3 span tags (x, y, and z) within a div tag, with span z being the last span in div. I want the text within span z to be shown at lower right cornor of div. How can I do that?

I have tried the following code but it does not work:

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

Answer 1

span is not a block level element, so I don't think you can position it relative to another element.

Make it a div with style="position:absolute;right:0;bottom:0;text-align:right'

Make sure that the containing div has style="position:relative;" to contain the absolute object.

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

Edit

You can use the span tag instead of the div, as the others have said. However span tags are for inline content. If you take the content out of the flow with absolute positioning then you should use a div IMO. If you're working within a framework or something and you need to use the span tag then I wouldn't lose any sleep over it. Here's a link on a similar question:

SPAN vs DIV (inline-block)

Answer 2

Much the same as @RSG is saying however you can use a span instead of converting it to a DIV . Assign the parent container position:relative and then assign the span.z with the following css:

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

See working example here: 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

There is a text-align css value that can be used but it only applies to block level elements and the contents within the block level element (in this case your div). Since you don't want all items in the div aligned to the right you can either float:right; the z span or wrap it in another div that has text-align:right; . Here are both solutions:

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