用jQuery计算Children的总宽度

一尘不染

用jQuery计算Children的总宽度

css

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

为了在水平网站上具有动态内容（如博客文章和图像），您必须为像素中的主体设置固定宽度，对吗？
因为您在其中使用浮动元素，否则浮动元素会折断并包装页面，具体取决于浏览器的宽度。

编辑！* 可以使用 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);
});

非常感谢！

阅读 397

2020-05-16

共1个答案

一尘不染

看起来您已经很正确了……不过有几点注意事项：

.outerWidth(true)包含padding和margin（因为您正在通过true），因此无需尝试再次添加。
.outerWidth(...) 仅返回第一个元素的宽度，因此，如果每个元素的大小不同，则将其乘以帖子数将不会是总宽度的准确值。

考虑到这一点，这样的事情应该会给你带来什么（保持250初始填充，我认为这是用于菜单和其他东西的？）：

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

这是否有帮助，或者您还有其他特定问题（问题还不太清楚）？

2020-05-16