1

私の Web サイトには、他の 2 つの div をラップする div があります。左側の内側の div は幅が狭く、右側の div は幅が広い (テキストで構成されている)。

ウィンドウの幅を縮小すると、一番右の内側の div の右端に到達すると、div 全体 (およびそのすべてのコンテンツ) が左の内側の div の下に折り返されます。ウィンドウのサイズをさらに変更すると、右の div のコンテンツ (テキスト) が折り返され始めます。

基本的に、私はこのコードを持っています:

<style type="text/css">
#wrapper {
  width: 100%;
}

#leftdiv {
  float: left;
}
</style>

<div id="wrapper">
  <div id="leftdiv">
    shortleft
  </div>
  <div id="rightdiv">
    longrightlongrightlongright
  </div>
</div>

ただし、div 全体が左の div の下に折り返される前に、右の div 内のテキストが折り返されることが私の望みです。コードを変更してそれを実現するにはどうすればよいですか?

4

1 に答える 1

0

これを試して：

#wrapper {
  width: 100%;
 }

#leftdiv {
  width: 20%;
  float: left;
}

#rightdiv {
  width: 79%
  float: right;
 }

これを実際に見たい場合は、次の Web ページを参照してください。

http://sherwoods-forests.com

パーセントが 100 になることはありません。レンダリング エンジンがピクセル数を計算するときの丸めが原因で、おかしな結果になることがあります。

左側のナビゲーション バーは、まさにこの方法で作成されています。
コンテンツ div 内では、各画像とそのキャプションが左または右にフロートされ、本文テキストが折り返されます。また、埋め込まれた div のマージンで遊ぶ必要があります。

于 2013-03-13T21:59:13.617 に答える