Question

我试过找到一个可以理解的答案，但放弃了。

要在横向网站（例如thehorizontalway.com）中拥有 dymnamic 内容（如博客文章和图片），您必须为pixles中的BODY，对吗？ 因为您在其中使用浮动元素，否则会破坏并包裹页面，具体取决于浏览器的宽度。

编辑！此特定值可以计算 jQuery ，谢谢你:)在这个例子中，添加了一个额外的值总大小，可用于浮动元素之前的内容。现在身体有一个动态的宽度！

我最初的想法是让jQuery为我们计算：（'每个帖子宽度'*'号码数量'）+ 250（额外内容）

HTML代码

<body style="width: ;"> <!-- Here we want a DYNAMIC value -->
<div id="container">
    <div id="menu"></div> <!-- Example of extra content before the floats -->
    <div class="post">Lorem</div>
    <div class="post">Lorem</div>
    <div class="post">Lorem</div> <!-- Floated elements that we want the sizes of -->
    <div class="post">Lorem</div>
</div>
...
<!-- So if these posts were 300px exept the last that was 500px wide, then the BODY WIDTH should be ( 300+300+300+500 ) + 250 [#menu] = 1650px -->

Alconja的结果和答案

$(document).ready(function() {
var width = 0;
$('.post').each(function() {
    width += $(this).outerWidth( true );
});
$('body').css('width', width + 250);
});

非常感谢！

Answer 1

看起来你已经非常正确......但是有两点注意事项：

.outerWidth(true)包括padding＆amp;保证金（因为你通过true），所以没有必要尝试＆amp;再加上它。
.outerWidth(...)仅返回第一个元素的宽度，因此如果每个元素的大小不同，则将其乘以帖子数将不是总宽度的准确值。

考虑到这一点，这样的事情会给你你所追求的东西（保持你的250初始填充，我假设它是用于菜单和事物？）：

var width = 0;
$('.post').each(function() {
    width += $(this).outerWidth( true );
});
$('body').css('width', width + 250);

这有帮助，或者您遇到其他一些具体问题（从您的问题中不是很清楚）？

Answer 2

你可以用这个单线计算宽度，虽然比我想要的时间长一点。

var width = $('.post').map(function(undefined, elem) {
    return $(elem).outerWidth(true);
}).toArray().reduce(function(prev, curr) {
    return prev + curr;
}, 0);

使用jQuery计算Children的总宽度

2 个答案: