1

2 つの div があるとします。1 つは最小幅の可変幅で、もう 1 つは右に浮いている div です。たとえば、jsbin.com のこのライブ デモ (コード付き) には次のようなものがあります。

<div id="container">
  <div id="header">header</div>
  <div id="fixedFloatingColumn">fixed-size column<br />o<br />o<br />o<br />o</div>
  <div id="fluidNonfloatingColumnContainer">
    <div class="column">stretchable column 1</div>
    <div class="column">stretchable column 2</div>
    <div class="column">stretchable column 3</div>
  </div>
  <div id="footer">footer</div>
</div>

ブラウザのサイズを変更して狭くすると、fluid div は最小幅に達するまでそれに応じて調整されます。その後、ウィンドウをさらに狭くすると、水平スクロールバーが表示され、右側のフローティング div がウィンドウの右側に隠れてオーバーフローし始めます。

私が望むのは、ユーザーがウィンドウを狭め続けた場合、非フローティング div が最小幅に達した後、ブラウザーはフローティング サイドバー div を非フローティング コンテンツの下に押し込み、オーバーフロー (非表示) するのではなく、権利。それは可能ですか？

4

1 に答える 1

1

メディア クエリを使用する意思がある場合は、そう思います。「レスポンシブ Web デザイン」を行う方法についての簡単な入門書として、まずEthan Marcotte によるこの記事を参照してください。Simon Collison の Web サイトは、あなたが達成しようとしていることの優れた例です。

于 2011-07-06T05:10:53.393 に答える