css - 流体网格布局 jQuery

Question

我正在使用 http://phase-change.org/jquery.gridlayout在我的布局中实现多个 div 的流畅布局。

我需要在右侧保留一个 div，其中包含我的主菜单，其余的只是内容 div。

我不知道如何在不 float 菜单的情况下将菜单保持在右侧，或者使网格元素尊重菜单并根据其宽度重新排列，它们只是重叠。

我的代码如下:

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

如果您不了解 Javascript，您可能不应该使用 Javascript 来设计您的网站。阅读原文CSS fluid grid tutorial了解如何在没有 Javascript 和 jQuery 的情况下布置流畅的网格。