CSS 如何使用css将文本放在“框”的右上角或右下角
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/65536/
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
How to put text in the upper right, or lower right corner of a "box" using css
提问by Corey Trager
How would I get the hereand and hereto be on the right, on the same lines as the lorem ipsums? See the following:
我将如何获得here和and here在右边，与lorem ipsums 相同？请参阅以下内容：
Lorem Ipsum etc........here
blah.......................
blah blah..................
blah.......................
lorem ipsums.......and here
回答by Garry Shutler
<div style="position: relative; width: 250px;">
<div style="position: absolute; top: 0; right: 0; width: 100px; text-align:right;">
here
</div>
<div style="position: absolute; bottom: 0; right: 0; width: 100px; text-align:right;">
and here
</div>
Lorem Ipsum etc <br />
blah <br />
blah blah <br />
blah <br />
lorem ipsums
</div>Gets you pretty close, although you may need to tweak the "top" and "bottom" values.
让您非常接近，尽管您可能需要调整“顶部”和“底部”值。
回答by phloopy
Float right the text you want to appear on the right, and in the markup make sure that this text and its surrounding span occurs before the text that should be on the left. If it doesn't occur first, you may have problems with the floated text appearing on a different line.
将要显示在右侧的文本向右浮动，并在标记中确保此文本及其周围的跨度出现在应位于左侧的文本之前。如果它没有首先出现，则浮动文本可能会出现在不同的行上。
<html>
<body>
<div>
<span style="float:right">here</span>Lorem Ipsum etc<br/>
blah<br/>
blah blah<br/>
blah<br/>
<span style="float:right">and here</span>lorem ipsums<br/>
</div>
</body>
</html>
Note that this works for any line, not just the top and bottom corners.
请注意，这适用于任何线条，而不仅仅是顶角和底角。
回答by BrewinBombers
If the position of the element containing the Lorum Ipsum is set absolute, you can specify the position via CSS. The "here" and "and here" elements would need to be contained in a block level element. I'll use markup like this.
如果包含 Lorum Ipsum 的元素的位置设置为绝对位置，则可以通过 CSS 指定位置。“here”和“and here”元素需要包含在块级元素中。我会使用这样的标记。
print("<div id="lipsum">");
print("<div id="here">");
print(" here");
print("</div>");
print("<div id="andhere">");
print("and here");
print("</div>");
print("blah");
print("</div>");
Here's the CSS for above.
这是上面的CSS。
#lipsum {position:absolute;top:0;left:0;} /* example */
#here {position:absolute;top:0;right:0;}
#andhere {position:absolute;bottom:0;right:0;}
Again, the above only works (reliably) if #lipsum is positioned via absolute.
同样，如果#lipsum 是通过绝对定位的，则上述方法仅适用（可靠）。
If not, you'll need to use the float property.
如果没有，您将需要使用 float 属性。
#here, #andhere {float:right;}
You'll also need to put your markup in the appropriate place. For better presentation, your two divs will probably need some padding and margins so that the text doesn't all run together.
您还需要将标记放在适当的位置。为了更好地呈现，您的两个 div 可能需要一些填充和边距，以便文本不会全部运行在一起。
回答by Bruce
Or even better, use HTML elements that fit your need. It's cleaner, and produces leaner markup. Example:
或者更好的是，使用适合您需要的 HTML 元素。它更干净，并产生更精简的标记。例子：
<dl>
<dt>Lorem Ipsum etc <em>here</em></dt>
<dd>blah</dd>
<dd>blah blah</dd>
<dd>blah</dd>
<dt>lorem ipsums <em>and here</em></dt>
</dl>
Float the emto the right (with display: block), or set it to position: absolutewith its parent as position: relative.
将 浮动em到右侧（使用display: block），或将其设置为position: absolute使用其父级作为position: relative。
回答by Loren Segal
<style>
#content { width: 300px; height: 300px; border: 1px solid black; position: relative; }
.topright { position: absolute; top: 5px; right: 5px; text-align: right; }
.bottomright { position: absolute; bottom: 5px; right: 5px; text-align: right; }
</style>
<div id="content">
<div class="topright">here</div>
<div class="bottomright">and here</div>
Lorem ipsum etc................
</div>
回答by Loren Segal
The first line would consist of 3 <div>s. One outer that contains two inner <div>s. The first inner <div>would have float:leftwhich would make sure it stays to the left, the second would have float:right, which would stick it to the right.
第一行将由 3<div>秒组成。一个外部包含两个内部<div>s。第一个内部<div>将float:left确保它保持在左侧，第二个将具有float:right，将其粘贴到右侧。
<div style="width:500;height:50"><br>
<div style="float:left" >stuff </div><br>
<div style="float:right" >stuff </div>
... obviously the inline-styling isn't the best idea - but you get the point.
...显然内联样式不是最好的主意 - 但你明白了。
2,3, and 4 would be single <div>s.
2,3 和 4 将是单个<div>s。
5 would work like 1.
5 会像 1 一样工作。
回答by AdamB
You need to put "here" into a <div>or <span>with style="float: right".
您需要将“此处”放入 a<div>或<span>with style="float: right"。
回答by ceejayoz
You may be able to use absolute positioning.
您也许可以使用绝对定位。
The container box should be set to position: relative.
容器框应设置为position: relative。
The top-right text should be set to position: absolute; top: 0; right: 0.
The bottom-right text should be set to position: absolute; bottom: 0; right: 0.
右上角的文本应设置为position: absolute; top: 0; right: 0。右下角的文本应设置为position: absolute; bottom: 0; right: 0。
You'll need to experiment with paddingto stop the main contents of the box from running underneath the absolute positioned elements, as they exist outside the normal flow of the text contents.
您需要尝试padding阻止框的主要内容在绝对定位元素下方运行，因为它们存在于文本内容的正常流之外。
回答by trillions
You only need to float the div element to the right and give it a margin. Make sure dont use "absolute" for this case.
您只需要将 div 元素向右浮动并给它一个边距。确保不要在这种情况下使用“绝对”。
#date {
margin-right:5px;
position:relative;
float:right;
}
