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＆lt;头＆gt;和＆lt; / head＆gt;：

<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的情况下布局流畅的网格。

Answer 2

首先，保罗值得我感谢他的小编，但同样重要的编辑，让我思考，他只是将其中一个标签从jQuery更改为CSS。

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

jQuery插件正在根据窗口大小进行调整
流体布局不是蛋糕！：p
我之前做了一个左边距，以便div在左边有一个边距。

我回到我的CSS并定义：

#content.hasLayout {

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

现在我的流体div表现得并且不允许菜单重叠，因为菜单是“phisically”aprocahing它们而不是浏览器窗口的边缘。

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

流体网格布局jQuery

2 个答案: