带有数学的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);

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

Answer 2

可以为您执行此操作的 CSS3 计算功能：

.normal {
    display: block;
    width: calc(((100% - 30px) / 6) - 180px);
}

这是纯 CSS 规范，有供应商扩展：-moz-calc 和 -webkit-calc 等。

Answer 3

您需要 4 列具有 .normal 类的偶数列，但是具有 .wide 类的一列是正常条目大小的两倍，这意味着有 5 列，4 列具有相同的宽度，第 5 列是正常条目的两倍单个列的宽度。我想这就是你需要的。

var oneColumnWidth = ($(document).width()/6);

$('.normal').width(oneColumnWidth);
$('.wide').width(oneColumnWidth * 2);