1

我使用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;


 }

我在 <head> 和 </head> 之间的 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脚本不是很了解，我什至不知道要开始寻找如何以这种方式实现它。

谢谢你。

4

2 回答 2

1

如果您不熟悉 Javascript，那么您可能不应该使用 Javascript 来为您的网站设置样式。阅读原始CSS 流体网格教程，了解如何在没有 Javascript 和 jQuery 的情况下布局流体网格。

于 2009-08-21T12:33:19.643 回答
0

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

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

  1. jQuery 插件正在根据窗口大小进行调整

  2. 流体布局不是蛋糕！:p

  3. 我之前做了一个左边距，以便 div 在左边有一个边距。

我回到我的css并定义为：

#content.hasLayout {

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

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

I do not think of this as the best solution but it works.

于 2009-08-21T14:45:35.020 回答