我能以某种方式使用CSS来放置block2在右上角的block1?
block2必须是(非常)最后的内部HTML代码,block1或者它可以放在后面block1.我不能把它作为第一个元素block1.block1可能的范围内<p>,图像,文本和我无法控制的知道什么和多少.block2流动..block1 {
color: red;
width: 100px;
border: 1px solid green;
}
.block2 {
color: blue;
width: 70px;
border: 2px solid black;
position: relative;
}Run Code Online (Sandbox Code Playgroud)
<div class='block1'>
<p>text</p>
<p>text2</p>
<div class='block2'>block2</div>
</div>Run Code Online (Sandbox Code Playgroud)
pro*_*son 68
.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;
}Run Code Online (Sandbox Code Playgroud)
应该这样做.假设你不需要它流动.
Adr*_*dro 11
您可以简单地将右浮动添加到.block2元素并将其放在第一个位置(这非常重要).
这是代码:
<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>
Run Code Online (Sandbox Code Playgroud)
问候...