css - 可变 Div 大小。位置右上角

Question

我有一个布局，其中 50% 的屏幕(从左到右而不是从上到下)由 map 占据，另外 50% 由内容占据。

我有 10 个 div，其中的文本长度可变，我想在每个 div 的右上角放置一些东西。文本是动态生成的，因此我无法判断 div 的大小。

<p id="contents">
  <div id="contentDiv">
  blah blah blah blah
  <div id="positionedthing">Thing I want positioned</div>
  </div>
  <div id="contentDiv">
  blah blah balh blah
  <div id="positionedthing">Thing I want positioned</div>
  </div>
</p>

p#contents 是 display :inline 如果它有任何效果。我试过了

position:absolute;
right:0;
top:0; 

但它相对于整个页面而不是每个单独的 div 进行定位。

Answer 1

要使用 position:absolute; 将绝对位置定位在其父级中，最简单的方法是对其应用 position:relative;。

但是，首先，您应该重新考虑您的标记。最重要的是:ID 应该是唯一的。所以你的 contentDiv 和 positionedThing 应该是类，而不是 ID:

<p id="contents">
<div class="contentDiv">
blah blah blah blah
<div class="positionedthing">Thing I want positioned</div>
</div>
<div class="contentDiv">
blah blah balh blah
<div class="positionedthing">Thing I want positioned</div>
</div>
</p>

CSS 可能如下所示:

.contentDiv {
    position:relative;
}

.positionedthing {
    position:absolute;
    top:0;
    right:0;
}

Demo