使用 jQuery 计算 Children 的总宽度 [英] Calculate total width of Children with jQuery
问题描述
我试图找到一个可以理解的答案，但放弃了.
为了在横向网站(如thehorizontalway.com) 您必须以像素为单位为 BODY 设置固定宽度，对吗?因为您在其中使用了浮动元素，否则会根据浏览器的宽度破坏和环绕页面.
编辑！这个特定的值可以用jQuery计算，谢谢你:) 在这个例子中，一个额外的值被添加到总大小，可用于浮动元素之前的内容.现在身体获得了动态宽度！
我最初的想法是让 jQuery 为我们计算:( '每个帖子宽度' * '帖子数量' ) + 250 (额外内容)
HTML 代码
<!-- 这里我们想要一个 DYNAMIC 值--><div id="容器"><div id="菜单"></div><!-- 浮动前的额外内容示例--><div class="post">Lorem</div><div class="post">Lorem</div><div class="post">Lorem</div><!-- 我们想要大小的浮动元素 --><div class="post">Lorem</div>...<!-- 所以如果这些帖子是 300 像素，除了最后一个是 500 像素宽，那么正文宽度应该是 ( 300+300+300+500 ) + 250 [#menu] = 1650 像素 -->
来自 Alconja 的结果和答案
$(document).ready(function() {无功宽度= 0;$('.post').each(function() {宽度 += $(this).outerWidth( true );});$('body').css('width', width + 250);});非常感谢！
看起来你说得非常对......不过有几个注意事项:
.outerWidth(true)包括填充 &边距(因为您传递的是true)，因此无需尝试 &再次添加..outerWidth(...)只返回第一个元素的宽度，所以如果每个元素的大小不同，将其乘以帖子数将不是一个准确的值总宽度.
考虑到这一点，这样的事情应该给你你想要的东西(保持你的 250 初始填充，我认为这是用于菜单和东西?):
var width = 0;$('.post').each(function() {宽度 += $(this).outerWidth( true );});$('body').css('width', width + 250);这有帮助吗，还是您遇到了其他一些具体问题(您的问题不太清楚)?
I've tried finding an understandable answer to this, but given up.
In order to have dymnamic content (like blog posts and images) in a horizontal website (like on thehorizontalway.com) you must set a fixed width for the BODY in pixles, right? Because you use floated elements inside it that otherwise would break and wrap down the page, depending on the browsers width.
EDIT! This specific value can be calculated with jQuery, thanks for that :) In this example, an additional value is added to the total size, which can be used for content before the floated elements. Now the body gets a dynamic width!
My initial thought was to have jQuery calculate this for us: ( 'EACH POSTS WIDTH' * 'NUMBER OF POSTS' ) + 250 (for the extra content)
HTML code
<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 -->
The result and answer from Alconja
$(document).ready(function() {
var width = 0;
$('.post').each(function() {
width += $(this).outerWidth( true );
});
$('body').css('width', width + 250);
});
Thanks so much!
Looks like you've got it pretty much right... a couple of notes though:
.outerWidth(true)includes the padding & margin (since you're passingtrue), so there's no need to try & add that in again..outerWidth(...)only returns the width of the first element, so if each element is a different size, multiplying this by the number of posts won't be an accurate value of total width.
With that in mind something like this should give you what you're after (keeping your 250 initial padding, which I assume is for menus & things?):
var width = 0;
$('.post').each(function() {
width += $(this).outerWidth( true );
});
$('body').css('width', width + 250);
Does that help, or is there some other specific problem you're having (wasn't quite clear from your question)?
这篇关于使用 jQuery 计算 Children 的总宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
