как поместить последний div в правый верхний угол родительского div? (CSS) - PullRequest
Новая
       11

как поместить последний div в правый верхний угол родительского div? (CSS)

49 голосов
/ 16 мая 2010

Могу ли я как-то использовать 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>

Ответы [ 4 ]

62 голосов
/ 16 мая 2010 

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

Должен сделать это. Предполагая, что он вам не нужен.

10 голосов
/ 03 ноября 2015

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

Привет ...

4 голосов
/ 16 мая 2010 
 <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, чтобы заставить его работать правильно ...

2 голосов
/ 16 мая 2010

Если вы можете добавить еще один упаковочный 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...