jquery - Jquery - 在内部加载另一个 DIV 时动态调整容器 DIV 宽度容器的大小

Question

当内部加载另一个 DIV（通过 PHP）时，如何使用 DIV 容器的 Jquery 更改宽度？

这是我的 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>

“项目”有浮动：左；我想要连续的所有“项目”。当内部加载“项目”时，如何动态更改“容器”宽度？

我正在使用滚动条 Jquery 插件来滚动 div。

请帮忙！

Answer 1

你需要这样的东西吗？

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

这会计算#container 内的元素并将#container 宽度设置为元素数量的倍数。在这个例子中，我为每个元素保留 100px。

法比奥

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);