用jQuery计算儿童的总宽度 [英] Calculate total width of Children with jQuery
问题描述
为了拥有 dymnamic 内容（比如博客文章），我已经尝试找到一个可以理解的答案，但是放弃了。和图像）在横向网站中（如 thehorizontalway.com ），您必须设置BODY在像素中的固定宽度，对吧？因为您在其中使用浮动元素，否则会破坏并折叠页面，具体取决于浏览器宽度。
编辑！ 可以使用 jQuery 计算此特定值，感谢:)在此示例中，将添加一个附加值到总大小，可以使用用于浮动元素之前的内容。现在身体有一个动态的宽度！
我最初的想法是让jQuery为我们计算：
（'EACH POSTS WIDTH'*'POSTS '）+ 250（额外的内容）
HTML代码
< body style =width：;> <！ - 这里我们要一个DYNAMIC值 - >
< div id =container>
< div id =menu>< / div> <！ - 浮动之前的额外内容示例 - >
< div class =post> Lorem< / div>
< div class =post> Lorem< / div>
< div class =post> Lorem< / div> <！ - 我们希望大小的浮动元素 - >
< div class =post> Lorem< / div>
< / div>
...
<！ - 所以如果这些帖子的宽度是300px，最后是500px宽，那么BODY WIDTH应该是（300 + 300 + 300 + 500）+ 250 [＃菜单] = 1650px - >
Alconja的结果和答案
<$ p $（$）$（$）$（$）$（$）$（$）$（$（$）$ b width + = $（this）.outerWidth（true）;
}）;
$（'body'）。css（'width'，width + 250）;
}）;
非常感谢！
看起来你已经很正确了...几张笔记：
-
.outerWidth（true）包括padding&保证金（因为你通过true），所以没有必要尝试& -
.outerWidth（...）只返回第一个元素的宽度，所以如果每个元素都是不同的大小，乘以这个帖子的数量不会是总宽度的准确值。
考虑到这一点像这样应该给你你以后（保持你的250初始填充，我认为是菜单和东西？）：
var width = 0;
$（'。post'）。each（function（）{
width + = $（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计算儿童的总宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
