CSS 右侧固定宽度的div，左侧填充剩余宽度的div

在本文中，我们将介绍如何使用CSS创建一个固定宽度的div位于右侧，同时左侧的div填充剩余的宽度。这个布局常见于响应式设计中，可以使页面在不同设备上都有良好的显示效果。

阅读更多：CSS 教程

使用float属性实现布局

一种简单的方法是使用float属性来实现这种布局。我们可以将右侧的div设置为固定宽度，然后给左侧的div设置为”float: left;”，就可以让它填充剩余的宽度了。

下面是一个示例：

<!DOCTYPE html>
<html>
  <head>
    <style>
      #container {
        width: 100%;
        overflow: hidden;
      }
      #right {
        width: 200px;
        float: right;
        background-color: blue;
        color: white;
      }
      #left {
        margin-right: 200px;
        background-color: red;
        color: white;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="right">
        Right div
      </div>
      <div id="left">
        Left div
      </div>
    </div>
  </body>
</html>

在这个示例中，我们将整个布局放在一个id为”container”的div中。右侧的div使用了”float: right;”，并设置了200px的固定宽度，背景颜色为蓝色。左侧的div设置了”margin-right: 200px;”来给右侧div留出空间，并填充剩余的宽度，背景颜色为红色。

使用flexbox布局实现自适应宽度

另一种方法是使用flexbox布局来实现这种效果。flexbox布局可以更方便地实现各种自适应布局。我们可以将整个布局放在一个flex容器中，然后使用flex属性控制子元素的宽度。

下面是使用flexbox布局实现这个效果的示例：

<!DOCTYPE html>
<html>
  <head>
    <style>
      #container {
        display: flex;
      }
      #right {
        width: 200px;
        background-color: blue;
        color: white;
      }
      #left {
        flex-grow: 1;
        background-color: red;
        color: white;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="left">
        Left div
      </div>
      <div id="right">
        Right div
      </div>
    </div>
  </body>
</html>

在这个示例中，我们将整个布局放在一个id为”container”的div中。通过设置”display: flex;”，我们将这个div变成一个flex容器。左侧的div使用了”flex-grow: 1;”，表示它会自动填充剩余的宽度。右侧的div设置了固定宽度为200px。