如何使用css将文本放在“框”的右上角或右下角答案

【问题标题】：How to put text in the upper right, or lower right corner of a "box" using css如何使用css将文本放在“框”的右上角或右下角
【发布时间】：2010-09-09 02:17:21
【问题描述】：

如何让here 和and here 位于右侧，与 lorem ipsum 位于同一行？请参阅以下内容：

Lorem Ipsum etc........here  
blah.......................  
blah blah..................  
blah.......................  
lorem ipsums.......and here

【问题讨论】：

标签： css layout

【解决方案1】：

<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>

让您非常接近，尽管您可能需要调整“顶部”和“底部”值。

【讨论】：

【解决方案2】：

将要显示在右侧的文本向右浮动，并在标记中确保该文本及其周围的跨度出现在应该在左侧的文本之前。如果它没有首先出现，您可能会遇到浮动文本出现在不同行上的问题。

<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>

请注意，这适用于任何线条，而不仅仅是顶角和底角。

【讨论】：

但是“and here”出现在新的一行，而不是与最后的“blah”在同一行
在哪个浏览器中？只要您首先拥有浮动文本，它在主要三个方面对我来说都很好。如果您只关心框的角，绝对定位肯定会起作用，但这允许您将任意行上的文本一直浮动到右侧。

【解决方案3】：

<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>

【讨论】：

【解决方案4】：

如果包含 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>");

这是上面的 CSS。

#lipsum {position:absolute;top:0;left:0;} /* 示例 */ #这里{位置：绝对；顶部：0；右：0；} #andhere {位置：绝对；底部：0；右：0；}

同样，如果#lipsum 通过绝对定位，上述方法（可靠）才有效。

如果没有，则需要使用 float 属性。

#here, #andhere {浮动：对；}

您还需要将标记放在适当的位置。为了更好地展示，您的两个 div 可能需要一些填充和边距，以便文本不会全部一起运行。

【讨论】：

【解决方案5】：

或者更好的是，使用适合您需要的 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>

将em 向右浮动（使用display: block），或将其设置为position: absolute，其父级为position: relative。

【讨论】：

【解决方案6】：

您需要将“这里”放入<div> 或<span> 和style="float: right"。

【讨论】：

【解决方案7】：

第一行将包含 3 个<div>s。一个外部包含两个内部<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>

...显然内联样式不是最好的主意 - 但你明白了。

2,3 和 4 将是单个 <div>s。

5 会像 1 一样工作。

【讨论】：

【解决方案8】：

您也许可以使用绝对定位。

容器框应设置为position: relative。

右上角的文本应设置为position: absolute; top: 0; right: 0。右下角的文字应该设置为position: absolute; bottom: 0; right: 0。

您需要尝试使用padding 来阻止框的主要内容在绝对定位元素下方运行，因为它们存在于文本内容的正常流程之外。

【讨论】：

【解决方案9】：

您只需要将 div 元素浮动到右侧并给它一个边距。确保在这种情况下不要使用“绝对”。

#date {
  margin-right:5px;
  position:relative;
  float:right;
}

【讨论】：