如何将here
和and here
放在右边,与lorem ipsums在同一行上?参见以下内容:如何使用css在“盒子”的右上角或右下角放置文字
Lorem Ipsum etc........here
blah.......................
blah blah..................
blah.......................
lorem ipsums.......and here
如何将here
和and here
放在右边,与lorem ipsums在同一行上?参见以下内容:如何使用css在“盒子”的右上角或右下角放置文字
Lorem Ipsum etc........here
blah.......................
blah blah..................
blah.......................
lorem ipsums.......and here
<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>
相当接近了,虽然你可能需要调整“顶”和“底”值。
第一行将包括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
你需要把“这里”进入<div>
或<span>
与style="float: right"
5会工作。
您可能可以使用绝对定位。
容器盒应设置为position: relative
。
右上方的文本应设置为position: absolute; top: 0; right: 0
。 右下方的文字应该设置为position: absolute; bottom: 0; right: 0
。
您需要试验padding
才能停止绝对定位元素下方的框的主要内容,因为它们存在于正常文本内容流之外。
<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>
如果包含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可能需要一些填充和边距,以便文本不会全部一起运行。
甚至更好,使用适合您需要的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
。
将想要显示在右侧的文本右移,并在标记中确保此文本及其周围跨度出现在应位于左侧的文本之前。如果它不是首先发生,您可能会遇到浮动文本出现在另一行上的问题。
<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>
请注意,这适用于任何行,而不仅仅是顶部和底部的角落。
你只需要将div元素浮动到右边并给它一个边距。确保在这种情况下不要使用“绝对”。
#date {
margin-right:5px;
position:relative;
float:right;
}
但是,“在这里”出现在一个新行,而不是在同一行最后的“嗒嗒” – 2008-09-16 12:07:32