用jQuery计算Children的总宽度

  • Z时代
  • 2024-01-10
  • 分类：问答

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

为了在水平网站上具有动态 内容（如博客文章和图像），您必须为像素中的主体设置固定宽度，对吗？

因为您在其中使用浮动元素，否则浮动元素会折断并包装页面，具体取决于浏览器的宽度。

来 计算

该特定值，谢谢：)在此示例中，总大小中添加了一个附加值，该值可用于浮动元素之前的内容。现在，身体将获得动态宽度！ *

我最初的想法是让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和margin（因为您正在通过true），因此无需尝试再次添加。

  • .outerWidth(...) 仅返回第一个元素的宽度，因此，如果每个元素的大小不同，则将其乘以帖子数将不会是总宽度的准确值。

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

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

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

以上是 用jQuery计算Children的总宽度 的全部内容， 来源链接： utcz.com/qa/406996.html

回到顶部