Как поместить последний div в правый верхний угол родительского div? (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;
}

<div class='block1'>
    <p>text</p>
    <p>text2</p>
    <div class='block2'>block2</div>
</div>

Ответы

Ответ 1

.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>

Ответ 2

Вы можете просто добавить правый float в элемент .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>

С уважением...

Ответ 3

 <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>

Вы можете clear:both или clear:left в зависимости от конкретного контекста. Кроме того, вам нужно будет поиграть с width, чтобы он работал правильно...

Ответ 4

Если вы можете добавить еще один разделитель 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>