html - スマートページのサイズ変更

Question

図に示すように、固定幅の 3 つのブロック (重要な場合は高さが異なる場合があります) を持つ HTML ページがあるとします。

次の図に示すように動作させたいと思います。ブラウザの画面幅が縮小され、3 つのブロックすべてが 1 行に収まらなくなると、最初のブロックがダウンします。

そのような動作を達成することは可能ですか? できればCSSのみを使用しますが、実用的なソリューションは素晴らしいでしょう。

Answer 1

Javascript の策略なしに最初のブロックをドロップダウンさせることは事実上不可能です。一方、右端の 1 ドロップを作成するのfloat: leftは簡単です。

Answer 2

<div style="width: 100%;">
    <div style="display: inline-block; background-color: red; width: 200px;">DIV2</div>
    <div style="display: inline-block; background-color: yellow; width: 200px;">DIV3</div>
    <div style="display: inline-block; float: left; background-color: lightBlue; width: 200px;">DIV1</div>
    <br style="clear: left;">
</div>

これは機能します。ブロック 1 を最後のブロックとして配置し、その 1 つだけを左にフロートさせます。

Answer 3

float:left および固定幅の値で div を使用する

        <div style="float:right; width:250px; position:relative; height:100px; border:solid 1px #000000">    
3
    </div>        
        <div style="float:right; width:250px; position:relative; height:100px; border:solid 1px #000000">
        2    
    </div>
<div style="float:right; width:250px; position:relative; height:100px; border:solid 1px #000000">    
        1
    </div>

そのように...最初のものはうまくいくことは承知していますが、これはjavascriptを使わずにできる最も簡単な方法です..

Answer 4

<div style="width: 100%;">
  <div style="width: 50px; float left;">DIV1</div>
  <div style="width: 50px; float left;">DIV2</div>
  <div style="width: 50px; float left;">DIV3</div>
  <br style="clear: left;" />
</div>

Answer 5

これら 3 つのブロックすべてを div 内に配置し、その幅を 100% に設定します。画面のサイズが変更されると、ブロックが自動的に配置されます。