JQuery - контейнер динамического размера DIV, когда другой DIV загружается внутри

Question

Как я могу изменить ширину с помощью Jquery контейнера DIV, когда другой DIV загружается внутри (через PHP)?

Это мой HTML-код

<div id="container"> 
    <div class="item"> Content 1 </div> 
</div> 

Теперь у меня есть, чтобы заполнить динамически «контейнер» для каждой страницы. Еще одна страница может иметь этот HTML код

<div id="container"> 
    <div class="item"> Content 1 </div> 
    <div class="item"> Content 2 </div> 
    <div class="item"> Content 3 </div> 
</div> 

"элемент" имеет поплавок: левый; Я хочу все «предметы» в строке. Как можно динамически изменять ширину «контейнера», когда внутри загружается «элемент»?

Я использую плагин JBL для прокрутки, чтобы прокручивать div.

Пожалуйста, помогите!

Answer 1

Вам нужно что-то вроде этого?

$(document).ready(function(){ 
    var youtWidth = 100; 
    $('#container').width($('#container .item').length * yourWidth); 
}) 

Это подсчет элементов внутри # контейнера и установка ширины # контейнера в несколько из числа элементов. В этом примере я сохраняю 100 пикселей для каждого элемента.

Фабио

Answer 2

Вы можете рассчитать ширину детей и применять в общей сложности в контейнер, например:

var contentWidth = 0; 

$('#container .item').each(function() { 
    // outerWidth(true) includes margins 
    contentWidth += $(this).outerWidth(true); 
}); 

$('#container').width(contentWidth); 

Демо: http://jsfiddle.net/jtbowden/SQASY/

---

Или, с некоторыми основными CSS, вы могли бы избегайте делать это с JavaScript вообще:

Демонстрация: http://jsfiddle.net/jtbowden/YBKxn/1/

Answer 3

Если детали имеют разную ширину, вы всегда можете сделать:

var totalWidth = 0; 
$('#container').children('.item').each(function(){ 
    totalWidth += $(this).outerWidth(); 
}); 

$('#container').width(totalWidth);