CSS 两个 div 元素; 左边应为固定宽度，右边应占据剩余空间

在本文中，我们将介绍如何使用 https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 创建一个包含两个 div 元素的布局。其中，左边的 div 元素将具有固定宽度，而右边的 div 元素将占据剩余的空间。

阅读更多：https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 教程

创建HTML结构

首先，我们需要创建一个基本的HTML结构，包含两个 div 元素。下面是一个示例：

<div class="container">
  <div class="left-sidebar">
    <!-- 左边的内容 -->
  </div>
  <div class="right-content">
    <!-- 右边的内容 -->
  </div>
</div>

在这个例子中，我们使用了一个父级 div 元素来包裹两个子级 div 元素。左边的 div 元素具有类名为 “left-sidebar”，右边的 div 元素具有类名为 “right-content”。

添加CSS样式

接下来，我们需要为这两个 div 元素添加 https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 样式。我们将使用 flexbox 布局来实现左边的固定宽度和右边的占据剩余空间。下面是一种实现的方式：

.container {
  display: flex;
}

.left-sidebar {
  width: 200px; /* 设置左边 div 元素的固定宽度 */
}

.right-content {
  flex: 1; /* 设置右边 div 元素占据剩余空间 */
}

在这个例子中，我们先把父级 div 元素设置为 display: flex;，这样它的子元素将使用 flexbox 布局。然后，我们通过设置左边的 div 元素的宽度为 200px（可以根据需要进行调整），来实现固定宽度效果。接着，我们使用 flex: 1; 来让右边的 div 元素占据剩余的空间。

示例

为了更好地理解上述内容，我们来看一个完整的示例。下面是一个包含两个 div 元素的布局：

<!DOCTYPE https://sotoolbox.com/tag/css target="_blank" rel="nofollow">html>
<https://sotoolbox.com/tag/css target="_blank" rel="nofollow">html>
<head>
  <style>
    .container {
      display: flex;
    }

    .left-sidebar {
      width: 200px;
      background-color: lightgray;
      padding: 10px;
    }

    .right-content {
      flex: 1;
      background-color: lightblue;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="left-sidebar">
      <h2>左边</h2>
      <p>这是左边的内容。</p>
    </div>
    <div class="right-content">
      <h2>右边</h2>
      <p>这是右边的内容。</p>
      <p>这是右边的其他内容。</p>
    </div>
  </div>
</body>
</html>

在这个示例中，我们给左边的 div 元素添加了灰色背景和内边距，并在其中放置了一个标题和一些文本。右边的 div 元素具有蓝色的背景和内边距，并包含了两段文本。

当你在浏览器中打开这个示例时，你将看到左边的 div 元素具有固定的宽度，右边的 div 元素占据了剩余的空间。