我试着找到一个可以理解的答案,但放弃了。
为了在一个水平的网站(如thehorizontalway.com)中具有dymnamic内容(如博客帖子和图像),您必须为像素设置BODY的固定宽度,对吧?因为您在其中使用浮动元素,否则会破坏和折叠页面,具体取决于浏览器的宽度。
编辑!这个具体值可以用jQuery计算,谢谢:)在这个例子中,一个额外的值被添加到总大小,可以用于浮动元素之前的内容。现在身体获得动态宽度!
我最初的想法是让jQuery为我们计算一下:
(‘每个位置宽度’*’位数’)250(额外的内容)
<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&保证金(因为你是真实的),所以没有必要尝试&再加一点。
> .outerWidth(…)仅返回第一个元素的宽度,因此如果每个元素的大小不同,则将其乘以帖子数量将不会是总宽度的准确值。
考虑到这一点,这样的事情应该给你你以后(保持你的250初始填充,我认为是菜单和东西?):
var width = 0; $('.post').each(function() { width += $(this).outerWidth( true ); }); $('body').css('width',width + 250);
这有帮助,还是有其他一些具体的问题(你的问题不是很清楚)?