流體網格佈局jQuery

Question

我使用http://phase-change.org/jquery.gridlayout來實現我的佈局中幾個div的流體佈局。

我需要保留右側包含我的主菜單，其餘的只是內容div。

我無法弄清楚如何保持右邊的菜單沒有浮動，或者使網格元素因菜單寬度而被重新排列，它們只是重疊。

我的代碼如下：

HTML：

<div id="menu"> 
</div> 

<div id="content"> 



<div class="block"> 
<p>1</p> 
</div> 

<div class="block"> 
<p>2</p> 
<p>2</p> 
</div> 

<div class="block"> 
<p>3</p> 
<p>3</p> 
<p>3</p> 
<p>3</p> 
</div> 

<div class="block"> 
<p>4</p> 
<p>4</p> 
<p>4</p> 
<p>4</p> 
</div> 

<div class="block"> 
<p>5</p> 
<p>5</p> 
<p>5</p> 
<p>5</p> 
<p>5</p> 
<p>5</p> 
<p>5</p> 
</div> 

<div class="block"> 
<p>6</p> 
<p>6</p> 
<p>6</p> 
<p>6</p> 
</div> 

</div> 

CSS：

#content.hasLayout { 

position:relative; 
margin-left:30px; 

} 

#block { 

width:214px; 
background-color:#CF0; 
margin:30px 0 10px 0; 

} 

#menu { 
width:180px; 
height:700px; 
background-color:#669; 
float:right; 


} 

我的<頭之間的JavaScript>和< /頭>：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script> 
<script type="text/javascript" src="JQuery_Plug_ins/jquery.gridlayout.js"></script> 

<script type="text/javascript">    

$(document).ready(function(){ 


$('#content').addClass('hasLayout').gridLayout('div.block' , { col_widht:250, min_cols: 3 }); 
         }); 
</script> 

我對Java腳本編程不是很瞭解，我真的不知道甚至不知道如何以這種方式實現它。

謝謝。

Answer 1

首先，Paul非常感謝他的小而不重要的編輯，這讓我想到了，他只是將其中一個標記從jQuery改爲CSS。

給人一些思考這個問題，我意識到了一些東西：

1. 的jQuery插件，根據窗口大小

2. 流體佈局不是蛋糕調整！ ：p

3. 我之前做了一個左邊距，以便divs左邊有餘量。

我又回到了我的CSS和定義的：

#content.hasLayout { 

position:relative; 
margin-left:30px; 
**margin-right:180px;** <------- Added this 
} 

現在我流體div的行爲和不容許因爲菜單是菜單不重疊「phisically」 aprocahing他們，而是邊緣的瀏覽器窗口是。

我不認爲這是最好的解決方案，但它的工作原理。

Answer 2

如果你不懂Javascript，你可能不應該使用Javascript來設計你的網站。閱讀原始CSS fluid grid tutorial以瞭解如何在沒有Javascript和jQuery的情況下佈置流體網格。