用jQuery计算儿童的总宽度

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

为了在一个水平的网站(如thehorizontalway.com)中具有dymnamic内容(如博客帖子和图像)，您必须为像素设置BODY的固定宽度，对吧？因为您在其中使用浮动元素，否则会破坏和折叠页面，具体取决于浏览器的宽度。

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

我最初的想法是让jQuery为我们计算一下：
(‘每个位置宽度’*’位数’)250(额外的内容)

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

非常感谢！

解决方法

看起来你已经很正确了…几个笔记：

> .outerWidth(true)包括padding&保证金(因为你是真实的)，所以没有必要尝试&再加一点。
> .outerWidth(…)仅返回第一个元素的宽度，因此如果每个元素的大小不同，则将其乘以帖子数量将不会是总宽度的准确值。

考虑到这一点，这样的事情应该给你你以后(保持你的250初始填充，我认为是菜单和东西？)：

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

这有帮助，还是有其他一些具体的问题(你的问题不是很清楚)？

用jQuery计算儿童的总宽度

解决方法

猜你在找的jQuery相关文章