javascript - 半随机定位 Div，不重叠

Question

我有一个页面，其中包含包含不同字体大小的短语(一两个词)的 DIV，这些 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 来解决问题。但我不知道从哪里开始。有什么建议吗？

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