0

現在、 「wrapper」の id を持つメイン div があり、この div 内で、 「wrapper」の幅全体を占める 2 つの他の div を作成しようとしています。最初の div である"sidebar"は狭く、 "wrapper"の右端に表示したい情報が含まれています。私が持っている2番目の内部divは、ユーザーが挿入したデータからphpとjavascriptを使用して動的に更新されます。IDは"maincontent"と呼ばれます。

最初は「ラッパー」内にうまく配置できます。問題は、「maincontent」div に新しいコンテンツが追加されたときに発生します。新しいコンテンツが追加されると、「サイドバー」の div は新しく追加されたコンテンツの高さに比例して下に移動します。

だから、私の質問はこれです：

2 つの内部 div をページ上部の位置に維持しながら、何も移動せずに動的に下方に拡張するにはどうすればよいですか?

4

2 に答える 2

2

float:left左のコンテンツが必要です：

以下の css を参照してください。

  .wrapper
  {
     margin:0;
     padding:0;
     top:10px;
     width:100%;
     height:500px;
     background-color:yellow;
  }
  .left-content
  {
     position:relative;
     width:20%;
     background-color:red;
     height:100%;
     float:left;
  }
  .main-content
  {
     position:relative;
     width:80%;
     left:20%;
     background-color:green;
     height:100%;

  }

あなたのdivは以下のとおりです：

<body>
<div class="wrapper">
  <div class="left-content">
  </div>
  <div class="main-content">
  </div>
</div>
</body>

重要なのは、親コンテナの幅を子コンテナに正確に分割することです

すなわちtotal width of child containers <= parent width

ほら、コンテナに対してposition行うときは、CSSスタイルの属性について学ぶ必要があります.cssプロパティは、それらに対して機能し始めます。position:relativetop, left,right,bottom

于 2013-03-03T07:52:53.923 に答える
0

私のフィドルをチェックしてください。Javascriptは完全に不要です。それがあなたを助けるかどうか、または質問が残っているかどうか教えてください. 最も重要な部分は、メインコンテンツとサイドバーの両方 を持つfloat: leftことです。http://jsfiddle.net/y89zp/float: right

于 2013-03-03T07:58:23.717 に答える