流体网格布局 jQuery答案

【问题标题】：Fluid grid layout jQuery流体网格布局 jQuery
【发布时间】：2010-11-21 15:31:52
【问题描述】：

我使用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 脚本不是很了解，我什至不知道如何开始研究如何以这种方式实现它。

谢谢。

【问题讨论】：

标签： css layout grid fluid

【解决方案1】：

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

【讨论】：

感谢您的回复，我打算只使用 css 和 html，但我无法使 div 布局与使用 jQuery 插件时相同。我的意思是它们不会彼此低于窗口的大小被调整了，我也无法在它们之间实现标准的垂直间隙。我已经看过并阅读了那篇文章，确实非常好。谢谢

【解决方案2】：

首先，Paul 值得我感谢他的小而重要的编辑，这让我想到，他只是将其中一个标签从 jQuery 更改为 CSS。

在思考了这个问题之后，我意识到了一些事情：

jQuery插件正在根据窗口大小进行调整
流体布局不是小菜一碟！ :p
我之前做了一个左边距，这样 div 就会在左边有一个边距。

我回到我的 css 并定义在：

#content.hasLayout {

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

现在我的流体 div 的行为不允许菜单重叠，这不是因为菜单“物理”地接近它们，而是浏览器窗口的边缘。

我不认为这是最好的解决方案，但它确实有效。

【讨论】：