Позиционирование элементов Div произвольно, без наложений

Question

У меня есть страница с 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

предупреждение (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>

Сделайте так, чтобы все ваши элементы просто отображали inline, выводили их в случайном порядке, а затем устанавливали для них случайные поля. Все это можно сделать с помощью кода на стороне сервера (или JavaScript, если вы хотите, чтобы он был на стороне клиента).

Answer 2

Значение x установлено для каждого из них, вы хотите быть как можно выше на странице (наименьшее значение y), насколько это возможно, без перекрытия. Не так уж плохо:

1) Визуализация контейнера - положение: относительное; Визуализируйте каждый элемент внутри контейнера с помощью «position: absolute; top: 0; left: -1000;» - вытяните их все за пределы экрана.

2) Один за другим переместите элемент в нужное ему положение x-coininate и 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-узел за раз по соображениям производительности.

Сначала поместите наиболее важные элементы, и они будут отображаться с более высоким приоритетом, чем элементы под ними.

Answer 3

Не располагайте свои элементы абсолютно. По этой причине они падают друг на друга ....