这是代码:http://jsfiddle.net/ym2GQ/
p {
background: lightblue;
}
.end {
background: orange;
float: right;
display: inline;
}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam adipiscing orci at tortor bibendum suscipit et eu eros. Nunc congue, ante nec egestas fringilla, ipsum est porttitor leo, tempus lacinia augue erat posuere elit.
</p>
<div class="end">$$</div>
我希望 float $$
位于它之前的段落中。它应与段落中的最后一行对齐,但应向右浮动。
如何做到这一点?请注意,我必须在无法 float div 元素之前的段落元素的约束下解决此问题。不过,我可以用 DIV 元素做任何我想做的事。如有必要,我还可以将 DIV 元素移动到代码的其他部分。
最佳答案
在段落的右下角提供您想要的新信息,请参阅此实例:http://jsfiddle.net/AGEus/1/
简而言之:
- 制作
<div>
一个<span>
并将其作为段落的子项。 - 制作段落
position:relative
(使其建立自己的坐标系) - 在右侧的段落中添加一些填充,以便
.end
的内容不会与文本重叠。 - 对
.end
进行绝对定位和调整大小在段落的右下角。
HTML:
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
<span class="end">$$</span>
</p>
CSS:
p { position:relative; padding-right:2em }
p .end { position:absolute; right:0; bottom:0; width:2em }
关于html - 将 'floating'内容放在一段文字的右下方,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9320017/