динамическая настройка размера нескольких DIVs

Question

Я показываю json-ответ на странице html с помощью javascript. Ответ может содержать несколько результатов и одну ссылку, соответствующую каждому результату. Я показываю это динамически.

Код для этого:

var response=eval('(' + request.responseText + ')'); 

     for(i=0;i<response.items.length;i++) 
     { 

      var innerDivElement=document.createElement('div'); 
      divElement.appendChild(innerDivElement); 
      innerDivElement.setAttribute("id", response.items[i].link); 
      innerDivElement.setAttribute("title","link_attr"); 
      innerDivElement.setAttribute("class","links"); 
      innerDivElement.innerHTML=response.items[i].link; 
     } 

Здесь все DIVs имеют одинаковую высоту и ширину. Я хочу настроить размер DIV в зависимости от размера его innerHTML. Как это можно сделать?

Answer 1

Прежде всего, вы должны действительно попробовать использовать JavaScript-фреймворки, такие как jQuery. Функция eval(), например, не очень безопасна. Но в любом случае:

Если вы установите минимальную высоту и минимальную ширину для низкого значения в CSS для DIV, который содержит внутренние элементы, он будет растягиваться автоматически, когда это необходимо.

JS путь:

divElement.setAttribute("class", "innerElementHolder"); 

Или, если вы извлекаете эту DivElement из HTML страницы, просто добавьте:

class="innerElementHolder" 

в DIV, который содержит все элементы, которые вы создаете в вас JS.

innerElementHolder CSS должно быть что-то вроде:

.innerElementHolder { 
    min-height: 10px; 
    min-width: 10px; 
}