如何使用css在「盒子」的右上角或右下角放置文字

如何將here和and here放在右邊，與lorem ipsums在同一行上？參見以下內容：如何使用css在「盒子」的右上角或右下角放置文字

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

來源

2008-09-15 Corey Trager

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

相當接近了，雖然你可能需要調整「頂」和「底」值。

來源

2008-09-15 18:47:32

第一行將包括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。像1

來源

2008-09-15 18:44:57

你需要把「這裏」進入<div>或<span>與style="float: right"

5會工作。

來源

2008-09-15 18:46:23 AdamB

您可能可以使用絕對定位。

容器盒應設置爲position: relative。

右上方的文本應設置爲position: absolute; top: 0; right: 0。右下方的文字應該設置爲position: absolute; bottom: 0; right: 0。

您需要試驗padding才能停止絕對定位元素下方的框的主要內容，因爲它們存在於正常文本內容流之外。

來源

2008-09-15 18:46:54 ceejayoz

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

來源

2008-09-15 18:48:23

如果包含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;} /* example */ 
#here {position:absolute;top:0;right:0;} 
#andhere {position:absolute;bottom:0;right:0;}

再說一次，如果#lipsum通過絕對定位，上述方法纔可行（可靠）。

如果不是，則需要使用float屬性。

 
#here, #andhere {float:right;}

您還需要將您的標記放在適當的位置。爲了更好地呈現，您的兩個div可能需要一些填充和邊距，以便文本不會全部一起運行。

來源

2008-09-15 18:53:37 BrewinBombers

甚至更好，使用適合您需要的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: relative設置爲position: absolute。

來源

2008-09-15 19:49:55 Bruce

將想要顯示在右側的文本右移，並在標記中確保此文本及其周圍跨度出現在應位於左側的文本之前。如果它不是首先發生，您可能會遇到浮動文本出現在另一行上的問題。

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

請注意，這適用於任何行，而不僅僅是頂部和底部的角落。

來源

2008-09-15 19:50:29 phloopy

但是，「在這裏」出現在一個新行，而不是在同一行最後的「嗒嗒」 – 2008-09-16 12:07:32

你只需要將div元素浮動到右邊並給它一個邊距。確保在這種情況下不要使用「絕對」。

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

來源

2012-03-24 22:51:24 trillions

如何使用css在「盒子」的右上角或右下角放置文字

回答

相關問題