0

さまざまなフォントサイズの短いフレーズ（1〜2語）を含む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:relative; コンテナ内の各アイテムを「position:absolute; top:0; left:-1000;」でレンダリング - それらをすべて画面外に描画します。

2) 要素を 1 つずつ、必要な x 座標および y=0 に移動します。以前のすべてのレンダー アイテムでそれをチェックして、衝突するかどうかを確認します。衝突する場合は、衝突しなくなるまで 1 ピクセル下に移動します。

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 ノードを一度に 1 ピクセルずつ移動しないことが重要です。

最も重要なアイテムを最初に配置すると、その下のアイテムよりも優先的にレンダリングされます。

于 2009-08-20T05:55:21.510 に答える