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 は、彼の小さいながらも重要な編集をしてくれたことに感謝するに値します。これにより、彼はタグの 1 つを jQuery から CSS に変更しただけだと思いました。

この質問について少し考えた後、私はいくつかのことに気づきました：

  1. jQueryプラグインはウィンドウサイズに合わせて調整中

  2. 流動的なレイアウトはケーキではありません! :p

  3. divが左に余白を持つように、私は以前に左余白を作っていました。

CSS に戻り、次のように定義しました。

#content.hasLayout {

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

現在、私の流動的なdivは動作し、メニューが「物理的に」接近しているためではなく、ブラウザウィンドウの端が重なり合っているため、メニューが重複することはありません。

これが最善の解決策だとは思いませんが、うまくいきます。

于 2009-08-21T14:45:35.020 に答える