我能以某种方式使用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)
问候...