0

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

它就像一个标签云，但 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）非常糟糕……但这就是我可以一起做的（几乎）我想做的事情。上面的主要问题（除了令人困惑之外）是我无法设置定位，因此它不会重叠，因为我不知道字体的大小，也不知道它在屏幕上的显示方式。

很高兴使用 JavaScript 来做对。但我不知道从哪里开始。有小费吗？

4

3 回答 3

1

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

alert(document.getElementById('myElement').offsetHeight);

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

或者

试试这个

<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）来完成。

于 2009-08-19T16:48:22.047 回答
0

不要绝对定位你的元素。这就是他们互相摔倒的原因......

于 2009-08-19T17:54:38.620 回答
0

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

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

2）一个一个，将元素移动到它需要的x坐标和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 很重要。

将最重要的项目放在首位，它们将比它们下面的项目具有更高的优先级。

于 2009-08-20T05:55:21.510 回答