Question

我有一个布局，其中50％（左右而不是顶部）的屏幕被地图占用，另外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＃内容显示：内联如果有任何影响。我试过了

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

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

Answer 1

如果你定位一些绝对的东西，你需要将它的父母设置为亲戚。让你的div内容尊重定位div的内容的唯一方法之一就是浮动它们。

这是我想要的最好的选择。 http://jsbin.com/beduyiku/6/

注意当你有多个项目时需要使用类。 ID是唯一标识符，因此您可以期望document.getElementById（＆＃39; id＆＃39;）始终只返回一个元素。

Answer 2

要使用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

Answer 3

http://jsfiddle.net/49LXw/

我不确定这是不是你所追求的，我只是将你需要的东西浮到右边，并添加了一些显示css。但不要使用id代替多元素使用类。或者它会在某个时刻破裂。

.positionedthing {float:right;}

可变Div大小。位于右上方

3 个答案: