Html 将跨度放置在 div 中的特定位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5269147/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Placing span at a specificr position in div
提问by jslearner
I have 3 spantags (x, y, and z) within a divtag, 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?
我span在一个div标签中有 3 个标签（x、y 和 z），其中 span z 是 div 中的最后一个 span。我希望 span z 内的文本显示在 div 的右下角。我怎样才能做到这一点？
I have tried the following code but it does not work:
我已经尝试了以下代码，但它不起作用：
<span align="right" style="font-size: 0.76em;" >my text here</span>
回答by RSG
span is not a block level element, so I don't think you can position it relative to another element.
span 不是块级元素，所以我认为你不能相对于另一个元素定位它。
Make it a div with style="position:absolute;right:0;bottom:0;text-align:right'
使它成为一个 div 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.
确保包含的 div 必须style="position:relative;"包含绝对对象。
JSfiddle: http://jsfiddle.net/gHZqs/
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 标记而不是 div。但是 span 标签是用于内联内容的。如果您使用绝对定位将内容从流程中取出，那么您应该使用 div IMO。如果你在一个框架或其他东西中工作并且你需要使用 span 标签，那么我不会为此失眠。这是一个类似问题的链接：
回答by Dan
Much the same as @RSG is saying however you can use a spaninstead of converting it to a DIV. Assign the parent container position:relativeand then assign the span.zwith the following css:
与@RSG 所说的非常相似，但是您可以使用 aspan而不是将其转换为DIV. 分配父容器position:relative，然后span.z使用以下 css分配：
span.z{
position:absolute;
bottom:0;
right:0;
}
See working example here: http://jsfiddle.net/crYaw/1/
请参阅此处的工作示例：http: //jsfiddle.net/crYaw/1/
HTML:
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:
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;
}
回答by Adam Ayres
There is a text-aligncss 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:
有一个text-align可以使用的css 值，但它仅适用于块级元素和块级元素中的内容（在本例中为您的 div）。由于您不希望 div 中的所有项目都向右对齐，因此您可以使用float:right;z 跨度或将其包装在另一个具有text-align:right;. 以下是两种解决方案：
