javascript - jQuery 文档宽度与数学

Question

我还在学习 jQuery。虽然进展很慢，但是呃，至少我在学习。今天我需要有关页面宽度函数的帮助。我需要一个 jQuery 脚本来获取页面宽度，进行大量数学运算，然后将变量设置为宽度。这个脚本对我来说非常有帮助，因为我经常使用这个脚本，但我总是陷入困境。这就是我想要做的事情:

1. 获取页面宽度。
2. 页面宽度减去 30。
3. 将(页面宽度 - 30)除以 6。
4. 从 ((page-width - 30)/6) 中减去 180。
5. 将 .normal 类的宽度设置为 (((page-width - 30)/6)-180) 的宽度。
6. 最后，我需要将 .wide 的类设置为 2(((page-width -30)/6)-180)。

基本上，这应该创建 4 个偶数列的 .normal 类条目，但其中一列 .wide 类的大小是普通条目大小的两倍。

如果有人能帮我解决这个问题，那就太好了。我根本不知道从哪里开始。

编辑:我希望它看起来像这样的一个例子是 HERE ，除了每边 15 像素边距外应该是全屏，并根据屏幕分辨率更改帖子和元素的宽度。

Answer 1

我将把 css 内容(将 .normal-elements 与 .wide-element 对齐)留给您(应该使用 float:right 或绝对定位轻松完成)，并简单地显示 jQuery 代码:

// you don't need the '$' in your variable - I just think this is more readable
$width = ($(document).width() - 30)/6 - 180;
$('.normal').width($width);
$('.wide').width(2*$width);

请注意，这不会设置“正常”/“宽”类的宽度(就像您在 css 样式表中所做的那样)，而是设置具有“正常”或“类”的每个 dom 元素的宽度宽'。