html - 两个div，左边是static div，右边是fluid 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 并且它将是流动的。