html - 左側の静的 div と右側の流体 div の 2 つの div

Question

これが私の状況です：

   .left {
        float: left;
        width: 150px;
        height: 300px;
        margin-right: 20px
   }

  .right {
        float: right;
        max-width: 450px;
        height: 300px;
   }

右側の div を流動的にしたいので、ブラウザーの幅を狭くする場合は、画面の右側にある必要がありますが、幅は狭くなります。

しかし、私の右のdivはかなり失礼です。私が彼に言うことをする代わりに、彼は自分の幅を優先事項として扱います. ウィンドウが彼の右端に触れているとき、彼は幅を狭めるのではなく、貧弱な左の div の下にジャンプしています。

彼を罰する方法を知っていますか？彼の行動が正しくないことを彼に伝えるには？彼を画面の右側にとどまらせるには？

アドバイスありがとう！

Answer 1

以下を試してみてください。それがあなたが探しているものです。

    .left {
        float: left;
        width: 150px;
        height: 300px;
        margin-right: 20px;
        border:1px solid black;
   }
  .right {
        max-width: 450px;
        height: 300px;
        border:1px solid black;
        margin-left:155px;
   }

私の記憶が正しければ、フローティング div は自動幅を持つことができません。したがって、左の div には静的な幅があるため、右の div をマージンで押して、左の div をクリアし、流動的にすることができます。