Question

我还在学习jQuery。它进展得很慢，但是，至少我正在学习。今天我需要页面宽度功能的帮助。我需要一个获取页面宽度的jQuery脚本，进行大量的数学运算，然后将变量设置为宽度。这个脚本对我很有帮助，因为我倾向于使用它很多，而且我总是卡住。这就是我希望它做的事情：

获取页面宽度。
从页面宽度减去30。
将（页面宽度 - 30）除以6.
从（（页面宽度 - 30）/ 6）减去180。
将类的宽度.normal设置为（（（page-width-30）/ 6）-180的宽度。
最后，我需要将.wide的类设置为2（（（page-width -30）/ 6）-180）。

基本上，这应该创建4个甚至是.normal类的条目，但是有一个类的.wide是普通条目的两倍。

如果有人能帮助我，那就太棒了。我不知道从哪里开始。

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

Answer 1

我将保留css的东西（将.normal元素右对齐.wide-元素）给你（应该用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);

jQuery文档宽度与数学

3 个答案: