Question

我可以以某种方式使用CSS将block2放在block1的右上角中吗？

背景：

block2必须是block1的最后一个HTML内部代码，或者可以放在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>

Answer 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;
}

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

Answer 2

您可以简单地将一个右浮动添加到.block2元素并将其放在第一个位置（这非常重要）。

以下是代码：

cli

...问候

Answer 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来使其正常工作...

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

Answer 5

显示那里父母的左中和右。如果您有3个以上的元素，则对它们使用nth-child（）。

HTML示例：

<body>
    <ul class="nav-tabs">
        <li><a  id="btn-tab-business" class="btn-tab nav-tab-selected"  onclick="openTab('business','btn-tab-business')"><i class="fas fa-th"></i>Business</a></li>
        <li><a  id="btn-tab-expertise" class="btn-tab" onclick="openTab('expertise', 'btn-tab-expertise')"><i class="fas fa-th"></i>Expertise</a></li>
        <li><a  id="btn-tab-quality" class="btn-tab" onclick="openTab('quality', 'btn-tab-quality')"><i class="fas fa-th"></i>Quality</a></li>
    </ul>
</body>

CSS示例：

.nav-tabs{
  position: relative;
  padding-bottom: 50px;
}
.nav-tabs li {
  display: inline-block;  
  position: absolute;
  list-style: none;
}
.nav-tabs li:first-child{
  top: 0px;
  left: 0px;
}
.nav-tabs li:last-child{
  top: 0px;
  right: 0px;
}
.nav-tabs li:nth-child(2){
  top: 0px;
  left: 50%;
  transform: translate(-50%, 0%);
}

如何将最后一个div放入父div的右上角？（CSS）

背景：

代码：

5 个答案:

如何将最后一个div放入父div的右上角？ （CSS）

背景：

代码：

5 个答案:

如何将最后一个div放入父div的右上角？（CSS）