我试着为这个问题找到一个可以理解的答案,但是放弃了。
为了让动态的内容(如博客文章和图片)在水平网站(如thehorizontalway.com上)中,你必须在像素中设置一个固定的正文宽度,对吧?因为您在其中使用了浮动元素,否则将根据浏览器的宽度对页面进行拆分和折回。
编辑!这个特定值可以用jQuery计算出来,感谢这一点:)在这个例子中,向总大小添加了一个附加值,该值可用于浮动元素之前的内容。现在body获得了动态宽度!
我最初的想法是让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);
});
非常感谢!
发布于 2009-06-18 23:50:30
看起来你已经说对了.不过,还是有几个注意事项:
.outerWidth(true)
包括填充和边距(因为您传递的是true
),所以没有必要尝试&在again..outerWidth(...)
中只返回第一个元素的宽度,所以如果每个元素的大小不同,将其乘以帖子的数量将不会是总宽度的精确值。考虑到这一点,像这样的东西应该会给你你想要的东西(保持你的250初始填充,我假设这是菜单和东西?):
var width = 0;
$('.post').each(function() {
width += $(this).outerWidth( true );
});
$('body').css('width', width + 250);
这有帮助吗,或者你有其他一些具体的问题(从你的问题中不是很清楚)?
发布于 2016-06-17 08:02:58
你可以用这一行代码来计算宽度,虽然比我想要的要长一点。
var width = $('.post').map(function(undefined, elem) {
return $(elem).outerWidth(true);
}).toArray().reduce(function(prev, curr) {
return prev + curr;
}, 0);
https://stackoverflow.com/questions/1015669
复制相似问题