Html 如何将最后一个 div 放入父 div 的右上角？(CSS)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2842368/
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 place last div into right top corner of parent div? (css)
提问by Radek
Can I somehow use CSS to place the block2in top right cornerof block1?
我能以某种方式使用CSS来放置block2在右上角的block1？
Context :
语境 ：
block2must be the (very) last inside HTML code ofblock1or it could be placed afterblock1. I can't make it the first element inblock1.- Within
block1there could be<p>, images, text and it is beyond my control to know what and how many. - Also I need the
block2to flow.
block2必须是（非常）最后一个内部 HTML 代码，block1或者它可以放在block1. 我不能让它成为block1.- 在
block1有可能是<p>，图像，文字，这是我无法控制的知道和多少。 - 我也需要
block2流动。
Code :
代码 ：
.block1 {
color: red;
width: 100px;
border: 1px solid green;
}
.block2 {
color: blue;
width: 70px;
border: 2px solid black;
position: relative;
}<div class='block1'>
<p>text</p>
<p>text2</p>
<div class='block2'>block2</div>
</div>回答by prodigitalson
.block1 {
color: red;
width: 100px;
border: 1px solid green;
position: relative;
}
.block2 {
color: blue;
width: 70px;
border: 2px solid black;
position: absolute;
top: 0px;
right: 0px;
}<div class='block1'>
<p>text</p>
<p>text2</p>
<div class='block2'>block2</div>
</div>Should do it. Assuming you don't need it to flow.
应该做。假设你不需要它流动。
回答by Adriano Pedro
You can simply add a right float to .block2 element and place it in the first position (this is very important).
您可以简单地向 .block2 元素添加一个正确的浮点数并将其放在第一个位置（这非常重要）。
Here is the code:
这是代码：
<html>
<head>
<style type="text/css">
.block1 {
color: red;
width: 100px;
border: 1px solid green;
}
.block2 {
color: blue;
width: 70px;
border: 2px solid black;
position: relative;
float: right;
}
</style>
</head>
<body>
<div class='block1'>
<div class='block2'>block2</div>
<p>text</p>
<p>text2</p>
</div>
</body>
Regards...
问候...
回答by xandercoded
<div class='block1'>
<p style="float:left">text</p>
<div class='block2' style="float:right">block2</div>
<p style="float:left; clear:left">text2</p>
</div>
You can clear:bothor clear:leftdepending on the exact context.
Also, you will have to play around with widthto get it to work correctly...
您可以clear:both或clear:left取决于确切的上下文。此外，你将不得不玩弄width它才能正常工作......
回答by Jason Rowe
If you can add another wrapping div "block3" you could do something like this.
如果您可以添加另一个包装 div“block3”，您可以执行类似的操作。
<html>
<head>
<style type="text/css">
.block1 {color:red;width:120px;border:1px solid green; height: 100px;}
.block3 {float:left; width:10px;}
.block2 {color:blue;width:70px;border:2px solid black;position:relative;float:right;}
</style>
</head>
<body>
<div class='block1'>
<div class='block3'>
<p>text1</p>
<p>text2</p>
</div>
<div class='block2'>block2</DIV>
</div>
</body>
</html>
