Вопросы Теги

как разместить последнее отделение в правильный верхний угол родительского отделения? (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>
49
задан John Slegers 25 January 2016 в 12:40
поделиться

3 ответа

.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; }
 
text
 
text2
 
block2

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

67
ответ дан 7 November 2019 в 11:45
поделиться

Если вы можете добавить еще один оборачивающий 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>
2
ответ дан 7 November 2019 в 11:45
поделиться 
 <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
ответ дан 7 November 2019 в 11:45
поделиться