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

在本文中，我们将介绍如何使用CSS实现一个左侧固定宽度的div，同时让右侧的div填满剩余宽度的效果。

在开发网页时，经常遇到需要将页面分成多个区块的情况。有时我们需要一个固定宽度的侧边栏或导航栏，而希望其余的内容自动填满剩余的宽度。下面的示例将帮助我们实现这个效果。

首先，我们需要在HTML文件中创建一个容器，用于包裹左右两个div。代码如下：

<div class="container">
  <div class="sidebar">
    <!-- 左侧固定宽度div的内容 -->
  </div>
  <div class="content">
    <!-- 右侧自动填充宽度div的内容 -->
  </div>
</div>

接下来，我们将为这两个div添加CSS样式。首先是左侧的固定宽度div，我们可以为它设置一个具体的宽度，并使用float属性将其向左浮动。同时，我们还可以设置一些其他的样式，如背景颜色和边框等。代码如下：

.sidebar {
  width: 200px;      /* 设置固定宽度为200像素 */
  float: left;       /* 向左浮动 */
  background-color: #f1f1f1;
  border: 1px solid #ccc;
  padding: 10px;
}

接下来是右侧的自动填充宽度div，我们需要使用overflow: hidden;来清除浮动，并设置margin-left属性为左侧div的宽度，以便给左侧div留出空间。代码如下：

.content {
  overflow: hidden;     /* 清除浮动 */
  margin-left: 220px;   /* 左侧div的宽度加上一些间距 */
  padding: 10px;
}

上述代码中，我们设置了margin-left: 220px;来给左侧div留出了一些间距，以免与右侧div紧贴在一起。你可以根据实际情况调整这个值。

现在，我们已经完成了左侧固定宽度div和右侧自动填充宽度div的基本布局。你可以根据需要进一步美化这两个div的样式，使其符合你的设计。

下面是一个完整的示例代码，你可以将它复制到一个HTML文件中，然后在浏览器中查看效果。

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  width: 100%;
}

.sidebar {
  width: 200px;
  float: left;
  background-color: #f1f1f1;
  border: 1px solid #ccc;
  padding: 10px;
}

.content {
  overflow: hidden;
  margin-left: 220px;
  padding: 10px;
}
</style>
</head>
<body>

<div class="container">
  <div class="sidebar">
    <h2>Sidebar</h2>
    <p>This is the sidebar content.</p>
  </div>
  <div class="content">
    <h2>Content</h2>
    <p>This is the content.</p>
  </div>
</div>

</body>
</html>

你可以试着更改左侧div的宽度和右侧div的样式，看看效果会有什么变化。

阅读更多：CSS 教程