将“浮动”内容放在文本段落的右下角 [英] Place 'floating' contents at the bottom right of a paragraph of text
问题描述
以下是代码： http://jsfiddle.net/ym2GQ/
<！DOCTYPE html>
< html>
< head>< title>美元< / title>
< style type =text / css>
p {
background：lightblue;
}
.end {
background：orange;
float：right;
display：inline;
}
< / style>
< / head>
< body>
< 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>
< / body>
< / html>
我想要浮动 $$ 在其前的段落。它应该与段落中的最后一行对齐，但应该向右浮动。
如何做到这一点？请注意，我必须解决这个问题的约束下，我不能浮动的div元素之前的段落元素。我可以做任何我想要的DIV元素虽然。
给定您想要的新信息，我们可以将DIV元素移动到代码的其他部分。它在该段落的右下角，请参见此实例： http://jsfiddle.net/AGEus/1 /
简而言之：
- 使
< div& / code> a< span>并将其作为段落的子项。 - c $ c> position：relative （以便它建立自己的坐标系）
- 在右边的段落中添加一些填充，
.end不会与文本重叠。 - 绝对定位和大小
.end
$ b class =lang-html prettyprint-override>< 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}
Here is the code: http://jsfiddle.net/ym2GQ/
<!DOCTYPE html> <html> <head><title>Dollar</title> <style type="text/css"> p { background: lightblue; } .end { background: orange; float: right; display: inline; } </style> </head> <body> <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> </body> </html>I want the floating
$$to be within the paragraph before it. It should align with the lasts line in the paragraph but it should be floated to right.How can this be done? Please note that I have to solve this problem under the constraint that I can not float the paragraph element that comes before the div element. I can do whatever I want with the DIV element though. I can also move around the DIV element to some other part of the code if necessary.
解决方案Given your new information that you want it at the bottom right of the paragraph, see this live example: http://jsfiddle.net/AGEus/1/
In short:
- Make the
<div>a<span>and place it as a child of the paragraph. - Make the paragraph
position:relative(so that it establishes its own coordinate system) - Put some padding in the paragraph on the right side so that the contents of
.endwon't overlap the text. - Absolutely position and size the
.endto the bottom right of the paragraph.
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 } 这篇关于将“浮动”内容放在文本段落的右下角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
- Make the
