流体格子レイアウトjQuery

Question

私はhttp://phase-change.org/jquery.gridlayoutを使用して、私のレイアウトでいくつかのdivの流体レイアウトを実現しています。

私はメインメニューを含んでいる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

最初に、ポールは彼の小さいものだけど、それほど重要でない編集には感謝しています。彼は単にタグの1つをjQueryからCSSに変更しました。

この質問にいくつかの考えを与えた後、私はいくつかのことを実現：

1. jQueryプラグインは、ウィンドウサイズに応じて

2. 流体のレイアウトを調整しているケーキではありません！ ：p

3. 私は前に左の余白を作って、divが左に余白を持つようにしました。今のメニューは「phisically」それらをaprocahingではなく、エッジであるので、私の流体のdivが動作し、メニューがないオーバーラップすることができますいけない

   #content.hasLayout { 
   
   position:relative; 
   margin-left:30px; 
   **margin-right:180px;** <------- Added this 
   } 
   

   ：私は戻って私のCSSに行ってとで定義された

のブラウザウィンドウが表示されます。

私はこれを最善の解決策とは考えていませんが、機能します。

Answer 2

Javascriptに精通していない場合は、おそらくJavascriptを使用してサイトのスタイルを設定しないでください。 JavascriptとjQueryを使わずに流体グリッドをレイアウトする方法については、元のCSS fluid grid tutorialを読んでください。