用jQuery计算儿童的总宽度

前端之家收集整理的这篇文章主要介绍了用jQuery计算儿童的总宽度前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试着找到一个可以理解的答案,但放弃了。

为了在一个水平的网站(如thehorizontalway.com)中具有dymnamic内容(如博客帖子和图像),您必须为像素设置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);
});

非常感谢!

解决方法

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

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

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

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

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

猜你在找的jQuery相关文章