jQuery文檔寬度與數學

我還在學習jQuery。它進展緩慢，但呃，至少我在學習。今天我需要一個頁面寬度功能的幫助。我需要一個獲取頁面寬度的jQuery腳本，進行大量數學計算，然後將變量設置爲寬度。這個腳本對我非常有幫助，因爲我傾向於使用這個腳本，而且我總是陷入困境。這是我想要做的事情：jQuery文檔寬度與數學

獲取頁面寬度。
從頁面寬度減去30。
將（頁寬 - 30）除以6.
從（（page-width - 30）/ 6）中減去180。
設置class。width的寬度爲（（（（page-width - 30）/ 6）-180）的寬度。
最後，我需要將.wide的類設置爲2（（（page-width-30）/ 6）-180）。

基本上，這應該創建4個偶數列的條目，其中.normal的類，但有一列的.wide的類是正常條目大小的兩倍。

如果任何人都可以幫助我，這將是非常棒的。我不知道該從哪裏開始。

編輯：我想看起來像這樣的一個例子是HERE，除了應該是全屏，除了每邊15像素邊距，並根據屏幕分辨率更改帖子和元素的寬度。

來源

2012-02-11 James Charless Dickinson

你打算怎麼辦？你只是想要有這些定位？那麼你應該使用css。你想讓盒子填滿你的空白空間嗎？那麼你應該看看石工。有關在jQuery中使用寬度的更多閱讀，請查看http://api.jquery.com/?ns0=1&s=width&go= – danwit 2012-02-11 17:11:07

該頁面已經完成。我不能使用CSS？我需要頁面填充4列+ 1列，不管頁面寬度如何，這就是爲什麼我需要使用jQuery來完成所有數學工作。 – 2012-02-11 17:14:34

我會離開的CSS的東西（對齊。普通的元素從右到.wide元素）你（應該使用float很容易做到：正確或絕對定位），並簡單地顯示了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元素的寬度都是'普通'或「寬」。

來源

2012-02-11 17:18:03

*什麼*不起作用？你究竟需要什麼？ CSS來對齊的東西？ jQuery代碼來改變寬度（我的代碼片段的功能 - 至少在我的Firefox中）？還有別的嗎？編輯：*有人*刪除了我以前的「沒有工作」的評論... – 2012-02-11 17:36:09

我需要jQuery從文檔寬度中減去30，然後將該寬度除以5，然後從該寬度中減去180。然後，我需要JQuery將＃條目的標籤寬度設置爲.normal作爲（（（doc-30）/ 5）-180），並且jQuery將＃條目的寬度設置爲.wide作爲同樣的事情，但兩倍大，所以2 *。 – 2012-02-11 18:03:04

所以（除以6而不是5除外）與我發佈的代碼有什麼不同？也許[.width（）]（http://api.jquery.com/width/）和[.css（）]（http://api.jquery.com/css/）的文檔可能是你的朋友。 .. – 2012-02-12 14:51:29

CSS3的計算功能，可以爲你做到這一點：

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

這是純CSS規範，也有供應商擴展：-moz-calc和-webkit-calc等

來源

2012-02-11 17:19:04 daniel0mullins

這沒有奏效。：/ – 2012-02-11 17:23:43

我不知道那個。不幸的是[還沒有太多的瀏覽器支持]（http://caniuse.com/#feat=calc）。 – Brandan 2012-02-11 17:24:00

它甚至在Firefox中無法正常工作。我真的需要這個腳本來工作。 D： – 2012-02-11 17:28:49

你需要4個的偶數列.normal的類，但是.wide的類有一列，是普通條目大小的兩倍，這意味着有5列，其中4列寬度相同，5列列寬度是單列寬度的兩倍。我認爲這是你需要的。

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

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

來源

2012-02-11 17:42:21 ShankarSangoli

你是唯一真正瞭解我需要的人，哈哈。你有我可以添加你的Skype嗎？它不工作，但你看起來很聰明，所以我想進一步詳細解釋。 – 2012-02-11 18:00:59

你用這段代碼看到了什麼？ – ShankarSangoli 2012-02-11 18:08:26

這很難解釋。你有沒有Skype？如果沒有，我們可以在這裏進行聊天。 – 2012-02-11 18:09:21

jQuery文檔寬度與數學

回答

相關問題