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

【问题标题】：how to place last div into right top corner of parent div? (css)如何将最后一个 div 放入父 div 的右上角？（CSS）
【发布时间】：2011-02-20 00:08:05
【问题描述】：

我可以使用 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>

【问题讨论】：

标签： html css

【解决方案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>

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

【讨论】：

对不起，这是什么意思？ you dont need it to flow
他的意思是使用绝对定位或硬编码块 1 内元素的位置。通常你会尽量避免这种解决方案，但在某些情况下这是你必须做的。
+1 以获得有用的答案，但我需要一些不同的东西，我需要 block2 在 block1 的右上角居中/居中对齐。jsfiddle.net/farinspace/jywqk
这很接近，但我正在尝试做类似的事情，并且需要块 1 中的内容环绕块 2。

【解决方案2】：

您可以简单地为 .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>

问候...

【讨论】：

如果我不能把它放在第一位怎么办，因为它来自数据库服务器
这里重要的东西是 position: relative;浮动：对；然后让它顶部对齐只需放置：margin-top:auto;

【解决方案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 才能使其正常工作...

【讨论】：

@xander 我可以处理 block1 属性本身而不是里面的东西。内容来自 WordPress，所以我不确定如何在 css 中覆盖 block1 中的所有内容
@Radek “block1”中是否总是有一 (1) 个 div，如果可以通过 CSS 选择器div.block1 div 定位，或者如果div.block1 的孩子有一个类，那么div.block1 div.block2 { float:right; } 应该和div.block1 p { float:left; clear:left }一起做这个伎俩@
@xander：我最喜欢你的解决方案，但我很难在这个页面上实现它vk.onalllevels.com/about/limor我不知道里面会有什么元素<div class="format_text">
如果有帮助，我可以在 html 中定义 block1 后移动 <div class='block2'>block2</DIV>
这样最好。将它 (div.block2) 移动到向左浮动的第一个 <p> 标记之后。其他一切都可以在他们之后“流动”......

【解决方案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>

【讨论】：

我不认为我可以将它包装在 block3 中 :-(

【解决方案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%);
}

【讨论】：