0

私がやろうとしているのは、1 行に 2 つの div を配置することです。左側の div の幅は固定され、右側の div は、ブラウザーのサイズが変更されるとサイズが変更されます (既に達成されています)。私が達成したいのは、右の div のサイズ変更制限を設定することです。つまり、右の div の幅は、幅が n px 以上になるまで減少します。その後、ブラウザの水平スクロール。

(これの理由は、右の div に 5 つのタブのような jquery タブがあるためです。ブラウザーのサイズを変更すると、タブが互いのボタンでジャンプするため、右の div を停止して最後のタブまで縮小する必要があります）。

これまでの私のコードは次のとおりです。

<div style="float: left; width: 300px; margin-right: 10px; ">

</div>

<div style="overflow: hidden;">

</div>

2 つの div を 1 行に配置するより良い方法があれば教えてください (左の幅は固定され、右のサイズは制限付きで変更可能)。

乾杯、

4

2 に答える 2

1

min-width/max-width、または @media を確認します。

最小幅の場合は、クラスまたは ID を div2 に指定し、最小幅を設定します

    #div2{
       min-width:900px;
    }

さまざまな画面サイズを制御するには、@media を使用し、最大/最小幅を設定します。

    @media only screen and (max-width: 499px) {
      /* rules that only apply for canvases narrower than 500px */
    }

    @media only screen and (min-width: 500px) {
      /* rules that only apply for canvases wider than 500px */
    }

詳細はこちら: https://mislav.net/2010/04/targeted-css/

于 2013-03-04T01:22:07.060 に答える
0

試す：

<div class='left'></div>

<div class='right'></div>

<styles>
.left {
    float: left;
    margin-right: 10px;
    width: 300px;
}
.right {
    float: left;
    max-width: 300px;
    overflow-x: auto;
}
</styles>
于 2013-03-04T01:22:33.510 に答える