代码之家 › 专栏 › 技术社区 › elundmark

使用jQuery计算子项的总宽度

layout dynamic css jquery

elundmark · 技术社区 · 17 年前

我试图找到一个可以理解的答案,但还是放弃了。

动态的 网站中的内容(如博客文章和图片) 横向网站 thehorizontalway.com )你必须用皮克斯为身体设定一个固定的宽度,对吗? 因为您在其中使用了浮动元素,否则会根据浏览器的宽度分解和包装页面。

编辑此特定值可以是具有 jQuery

我最初的想法是让jQuery为我们计算:

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

非常感谢!

2 回复 | 直到 17 年前

472084 14 年前

看起来你说得很对。。。不过有几个注意事项:

.outerWidth(true) 包括填充和;保证金(因为你通过了 true ),因此没有必要尝试&再加一次。
.outerWidth(...) 只返回第一个元素的宽度,因此如果每个元素的大小不同,那么将其乘以帖子的数量将不是总宽度的准确值。

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

这有帮助吗,或者你还有其他一些具体的问题(你的问题不太清楚)?

smac89 10 年前

你可以用这一条线来计算宽度,虽然比我想要的要长一点。

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

推荐文章

Christina Norwood · 我需要什么Python技术来获取二进制边距数据?

4 年前

Ofek Pintok · 释放C中指针指针的动态内存

8 年前

M_D · 用jQuery替换文本会导致多个链接出错

8 年前

jfgoodhew1 · 在数据验证中按公式引用命名范围

8 年前

thebeancounter · android-向自定义对话框动态添加按钮

8 年前

F.Hall · 如何在html中使用onkeyup(this)C#文本框动态创建的链接中过滤数据?

8 年前

gideonzane · 动态命名范围的实际工作方式

8 年前

Erre Efe · 使用XUnit测试动态expando

8 年前

Rasec219 · 在脚本上使用append创建MDL输入后,无法使标签在MDL输入上工作;

8 年前

eternity1 · 动态访问熊猫数据帧的子集,执行计算并写入新数据帧

8 年前