Question

我不擅长编写移动网页布局等等。

我写过：

HTML：

<div id="title">...</div>

的JavaScript

$("#title").css("margin-left", "7%");
$("#title").css("margin-right", "7%");

var i = screen.width * 0.018 + "px";          // It would be 24.588 at resolution of 1366
$("#title").css("margin-top", i);                // And i wanted to use 24.588px here 
$("#title").css("margin-bottom", i);         // and here.

Chrome会在左侧和右侧显示div边距，但不显示顶部和底部边缘...

Answer 1

您的所有margin_*属性不应以下划线分隔，而应由-短划线分隔，如下所示：

$("#title").css("margin-left", "7%");
$("#title").css("margin-right", "7%");

var i = screen.width * 0.018 + "px";
$("#title").css("margin-top", i);
$("#title").css("margin-bottom", i);

jQuery的.css()方法，在此表单中使用时，将CSS属性名称作为其第一个参数，将值设置为其第二个参数。

另一种更好的方法是将对象传递给.css()：

var margin = screen.width * 0.018 + "px";

$('#title').css({
    marginLeft:   "7%",
    marginRight:  "7%",
    marginTop:    margin,
    marginBottom: margin
});

请注意，您需要使用属性的驼峰版本。

另外，为什么不使用百分比作为顶部和底部边距而不是在JavaScript中计算它们？

Answer 2

不需要任何下划线或短划线，您需要使用大写字母，例如：

$("#title").css("marginLeft", "7%");

Answer 3

这可能更简单。

function marge() {
    var sw = $(window).width() * 0.018 + "px";//get margin
    $("#title").css({margin: sw+' 7%'});//set margin tb lr
}
marge();//run initially
$(window).resize(function() { marge(); });//to adjust on resize of the window

第2行＆amp; 3解决问题，其余的允许它在窗口调整大小时再次运行该函数。

做了一个小提琴：http://jsfiddle.net/filever10/z2HQL/

无法使用var：JavaScript，CSS和jQuery设置边距

3 个答案: