유체 격자 레이아웃 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; 


} 

내 < 머리 사이에 자바 스크립트>와 </헤드> :

<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> 

내 코드는 다음과 같다

저는 자바 스크립팅에 대해 잘 알지 못합니다. 그런 식으로 구현하는 방법을 찾아야할지조차 모릅니다.

감사합니다.

Answer 1

첫 번째로 Paul은 jQuery에서 CSS로 태그를 변경하기 만하면되는 작지만 중요하지 않은 편집에 대한 감사의 말을 전합니다.

이 질문에 대한 몇 가지 생각을주고 나서 내가 실현 몇 가지 :

1. JQuery와 플러그인은

2. 유체 레이아웃 케이크하지 창 크기에 따라 조정됩니다! : p

3. div가 왼쪽으로 여백을 갖도록 왼쪽 여백을 만들었습니다.

내가 내 CSS로 돌아 갔고 정의 : 이제 내 유체 div의 행동과 메뉴가 있기 때문에 메뉴가 없습니다 중복 할 수 있도록 해달라고

#content.hasLayout { 

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

"phisically"오히려 가장자리를 aprocahing하지만, 브라우저 창이 열립니다.

나는 이것이 최선의 해결책이라고 생각하지 않지만 작동한다.

Answer 2

자바 스크립트에 익숙하지 않은 경우 자바 스크립트를 사용하여 사이트 스타일을 지정하면 안됩니다. Javascript 및 jQuery없이 유체 격자를 배치하는 방법을 배우려면 원래 CSS fluid grid tutorial을 읽으십시오.