Question

我正在尝试使用jQuery调整CSS属性：

menu_div的宽度应与屏幕相同：

$("#menu").css({width: (theWidth - 10)});

gallery_img应位于此div的左侧，contact_img应位于右侧：

$("#gallery_img").css({left: 0 + 'px'});
$("#contact_img").css({right: 0 + 'px');

menu-div和图像都有位置：绝对。我究竟做错了什么？所有图像都显示在彼此之上。

Answer 1

您的代码中存在语法错误：

$("#contact_img").css({right: 0 + 'px');
//                                    ^ missing closing brace }

此外，#menu元素的CSS宽度分配后面没有“px”，这会使规则无效并可能导致某些浏览器失败：

// Incorrect
$("#menu").css({width: (theWidth - 10)}); 

// Corrent
$("#menu").css({width: (theWidth - 10) + "px" });

请注意，如果您计划使用数字文字，您也可以单独使用字符串并避免连接。您还可以将css属性和值作为单独的参数传递：

$("#contact_img").css({right: '0px'});
$("#contact_img").css('right', '0px');

Answer 2

你有一些缺失的大括号，也许更简单的方法是：

$(document).ready(function () {
        var theWidth = $(window).width();
        $("#menu").css('width', theWidth - 10);
        $("#gallery_img").css('left', 0);
        $("#contact_img").css('right', 0);
    })

Answer 3

绝对位置会这样做。你左边的gallery_img应该是0px ...然后你的联系方式img的left属性应该是px中#menu +＃menu宽度的左边。

如果你没有用绝对位置指定left属性，那么你最终只会叠加所有内容。

使用jQuery编辑css-properties

3 个答案: