0

画像とサイドバーがあります。

<div id="outer" style="max-width:1020px;min-width:730px;overflow:hidden;overflow-x:hidden;overflow-y:hidden;">

  <div id="image" style="float:left;max-width:720px;">
    <img src="image.jpg" alt="" style="max-width:720px;" />
  </div>

  <div id="sidebar" style="width:300px;float:right;">
    content
  </div>

</div>

ウィンドウのサイズが変更され、サイドバーを表示する十分なスペースがない場合、サイドバーを非表示にしたいと考えています。

残念ながら、ウィンドウのサイズを変更すると、サイドバーが下に落ちて折り返されます。

を試してみwhite-space: nowrap;ましたが、ここでは当てはまらないようです。画像コンテナーはさまざまな高さを持つことができるため、固定の高さに設定することはできません。

divウィンドウのサイズが変更されたときに「外側」の拡大を停止し、サイドバーが表示されないようにするにはどうすればよいですか?

4

2 に答える 2

0

正直なところ、これを実現するにはレスポンシブ グリッドを使用する必要があります。Twitter によるブートストラップには、探している望ましい動作を実装する非常に明確な方法がありますが、そこにはたくさんあります。

ブートストラップ

于 2012-05-05T14:54:12.443 に答える
0

あなたが使用できる、

window.onresize = function(event) {
    if(document.body.cilentwidth < 1020) 
      document.getElementById('sidebar').style.visibility = 'hidden';
    else
       document.getElementById('sidebar').style.visibility = 'visible';
}

JavaScriptのサイズ変更イベント、既存のウィンドウの幅を確認し、それにdocument.getElementById('sidebar').style.visibility = 'hidden/visible'応じて、要件に応じてdivを非表示/表示します。

于 2012-05-05T15:00:17.420 に答える