为什么jQuery脚本没有设置元素的宽度?

时间:2012-03-31 17:38:56

标签: jquery width

詹姆斯在这里。我正在开发一个网站,无论屏幕分辨率如何,我都想拥有相同数量的帖子。我正在尝试使用这个脚本,但它不起作用。它应该得到页面文档的宽度,减去400px,将该数字除以4,然后将元素.entry的CSS设置为该数学方程式。任何人都可以帮我弄清楚什么是错的?我是jQuery的新手,所以令人惊讶的是我甚至能够做到这一点。

编辑:我最终使用此代码解决了我的问题:

$(function() {
            var cwidth = $(document).width() - 100;
            var pwidth = cwidth - 150;
            var ewidth = (pwidth - 150)/5;
            $("#container").css("width", cwidth);
                $("#posts").css("width", pwidth);
                $(".entry").css("width", ewidth);
                $(".photo").css("width", ewidth);
});

非常感谢你帮助。但是,我遇到了一些问题。由于某种原因,即使脚本除以5,每行只有4个帖子,帖子溢出了他们所在的div。示例:http://jamescharless.tumblr.com/ - 我认为这是因为条目所在的div由于它是用jQuery添加的,因此在CSS中没有设置宽度。有谁知道如何解决这一问题?此外,我尝试通过David Desandro实施砌体,它只会弄乱整个页面。我认为这也是因为div #posts和div .entry没有通过CSS获得宽度。任何人都可以帮助我解决这两个问题吗?

3 个答案:

答案 0 :(得分:3)

你需要这样做:

$(document).width()

$("document").width()

使用JSFiddle:http://jsfiddle.net/WsZry/

$(function() {
    width = ($(document).width()-400)/4;
    $(".entry").css("width", width);
})​;

由于document不是HTML元素,因此它是一个JavaScript属性。

答案 1 :(得分:0)

您在双引号document

中引用了$("document")
$(function() {
    var width = ($(document).width() - 400)/4;
    $(".entry").css("width", width);
});

答案 2 :(得分:0)

尝试删除文档周围的引号。尝试以下代码

    $(function() {
       var width = ($(document).width() - 400)/4;
       $(".entry").css("width", width);
    })