elu*_*ark 17 css jquery layout dynamic
我试过找到一个可以理解的答案,但放弃了.
为了在横向网站(例如thehorizontalway.com)上拥有dymnamic内容(如博客文章和图片),你必须为像素中的BODY设置一个固定的宽度,对吧？因为你在其中使用浮动元素,否则会破坏和包裹页面,具体取决于浏览器的宽度.
编辑!这个特定的值可以用jQuery 计算,多亏了:)在这个例子中,一个额外的值被添加到总大小,可以用于浮动元素之前的内容.现在身体有一个动态的宽度!
我最初的想法是让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);
});
非常感谢!
Alc*_*nja 36
看起来你已经非常正确......但是有两点注意事项:
.outerWidth(true)包括填充和边距(因为你正在通过true),所以没有必要尝试再添加它..outerWidth(...) 仅返回第一个元素的宽度,因此如果每个元素的大小不同,则将其乘以帖子数将不是总宽度的准确值.考虑到这一点,这样的事情会给你你想要的东西(保持你的250初始填充,我假设是菜单和东西？):
var width = 0;
$('.post').each(function() {
width += $(this).outerWidth( true );
});
$('body').css('width', width + 250);
这有帮助吗,或者你有其他一些具体问题(你的问题不是很清楚)？