Question

我有一个包含DIV的页面，其中包含不同字体大小的短语（一两个单词），需要根据数字参数从左到右定位，并且垂直以便不重叠。< / p>

它就像一个标签云，但是y轴中也包含信息（在这种情况下是“酷” - http://cool-wall.appspot.com）

我应该如何摆脱这些？我目前正在使用像这样非常混乱的DIV系列：

<div style="position:absolute; top:150px;left:10px;right:10px;bottom:10px"> 

<!-- then, repeated, with different top, left and font-size values -->

  <div style="align:center; margin:0; border:none; padding:0; float:left; visibility:visible; position:absolute; top:21%; left:56%; font-size:11px"> 
    <div style="margin-top:0%; margin-right:50%; margin-bottom:0%; margin-left:-50%;"> 
      <a href="foo"><span style="display:inline"> &larr; </span></a> 
      <a href="bar"><span style="display:inline"> Buzz </span></a> 
      <span style="display:inline"> &rarr; </span> 
    </div> 
  </div>

  <!-- of course, followed by a close div -->

</div>

我使用样式表来提取其中的一些样式，并且我意识到它的CSS（和HTML）非常糟糕......但这是我可以共同做的（差不多）我想做的事情。上面的主要问题（除了它令人困惑）是我无法设置定位，因此它不会重叠，因为我不知道字体的大小，以及它将如何显示在屏幕上。< / p>

很高兴使用JavaScript来做到正确。但我不知道从哪里开始。有什么提示吗？

Answer 1

dom对象上有一个javascript属性，如果你设置了宽度，它将告诉你标签的高度。我相信它叫做clientHeight

警报（的document.getElementById（ 'myElement'）的offsetHeight。）;

试试（另见http://www.webdeveloper.com/forum/archive/index.php/t-121578.html）

OR

试试这个

<span style="margin-top:${randomNumber}px;margin-bottom:${randomNumber}">randomtext</span>
<span style="margin-top:${randomNumber}px;margin-bottom:${randomNumber}">randomtext</span>
..
<span style="margin-top:${randomNumber}px;margin-bottom:${randomNumber}">randomtext</span>

让所有元素都显示为内联，以随机顺序输出，然后在它们上设置随机边距。这可以通过服务器端代码（或javascript，如果你想要客户端）来完成。

Answer 2

不要绝对定位你的元素。这就是他们彼此堕落的原因....

Answer 3

在每一个上设置x值，您希望在页面上尽可能高（最低y），因为它可以不重叠。还不错：

1）渲染容器 - 位置：相对;使用“position：absolute; top：0; left：-1000;”渲染容器内的每个项目 - 将它们全部绘制出屏幕。

2）逐个将元素移动到需要的x-coorinate并且y = 0;检查所有先前的渲染项目以查看它是否发生碰撞，如果碰撞，将其向下移动一个像素直到它不会发生碰撞：

var regions = [];
for(var i = 0; i < items.length; i++){
  var item = items[i];

  item.style.x = getX(item); // however you get this...
  var region = YAHOO.util.Dom.getRegion(item);
  var startingTop = region.top;
  for(var iReg = 0; iReg < regions.length; iReg++){
    var existingRegion = regions[iRegion];
    while(region.intersect(existingRegion)){
      region.top++;
      region.bottom++;
    }
    item.style.y = (region.top - startingTop) + 'px';
  }
}

由于性能原因，更新区域并不是实际上一次移动dom节点1px很重要。

首先放置最重要的项目，它们的呈现优先级低于它们之下的项目。

定位Div半随机，没有重叠

3 个答案: