如何将最后一个div放入父div的右上角?(CSS)

Rad*_*dek 49 html css

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

应该这样做.假设你不需要它流动.

  • 他的意思是使用绝对定位或硬编码块1内部元素的位置.通常,如果可能的话,尽量避免使用此解决方案,但在某些情况下,这是您必须要做的事情. (3认同)

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)

问候...