css实现右侧固定宽度 左侧宽度自适应

要实现右侧固定宽度、左侧宽度自适应的效果，可以使用CSS中的float属性和盒模型的原理来实现。下面是具体的实现步骤：

要实现右侧固定宽度、左侧宽度自适应的效果，可以使用CSS中的float属性和盒模型的原理来实现。下面是具体的实现步骤：

1. HTML结构的编写

首先，我们需要明确左右两侧元素的父容器。在父容器中，先写一个右侧的固定宽度的元素，再写一个左侧的自适应宽度的元素，可以使用div标签。此外，还可以考虑加上一个clearfix类，避免浮动元素的影响。

示例代码：

<div class="container clearfix">
  <div class="content-right"></div>
  <div class="content-left"></div>
</div>

1. CSS样式的编写

接下来，需要设置左右两侧元素的样式，让其实现左侧自适应宽度、右侧固定宽度的效果。

首先，设置右侧元素的样式，包括固定宽度、右浮动等属性，使其固定在右侧，不占用左侧元素的空间。

示例代码：

.content-right {
  float: right;
  width: 200px;
}

然后，设置左侧元素的样式，需要使其自适应宽度，同时减去右侧元素的宽度，否则会出现左侧元素换行的情况。

示例代码：

.content-left {
  overflow: hidden;
  /*下面的计算公式是容器的总宽度减去右侧元素的宽度*/
  width: calc(100% - 200px);
}

1. 示例说明

下面分别给出两种示例说明：

示例1：左侧为文章内容，右侧为目录列表

HTML结构代码：

<div class="container clearfix">
  <div class="content-right">
    <h3>目录列表</h3>
    <ul>
      <li><a href="#1">第一章</a></li>
      <li><a href="#2">第二章</a></li>
      <li><a href="#3">第三章</a></li>
    </ul>
  </div>
  <div class="content-left">
    <h1 id="1">第一章</h1>
    <p>这里是第一章的内容，可以填写大量的文章内容。</p>
    <h1 id="2">第二章</h1>
    <p>这里是第二章的内容，可以填写大量的文章内容。</p>
    <h1 id="3">第三章</h1>
    <p>这里是第三章的内容，可以填写大量的文章内容。</p>
  </div>
</div>

CSS样式代码：

.content-right {
  float: right;
  width: 200px;
}

.content-left {
  overflow: hidden;
  width: calc(100% - 200px);
  padding: 20px;
  border: 1px solid #ddd;
}

.content-left h1 {
  margin-top: 0;
  padding-top: 20px;
}

示例2：左侧为产品列表，右侧为产品详情

HTML结构代码：

<div class="container clearfix">
  <div class="content-right">
    <h3>产品详情</h3>
    <p>这里是产品A的详情介绍。</p>
  </div>
  <div class="content-left">
    <ul>
      <li><a href="#">产品A</a></li>
      <li><a href="#">产品B</a></li>
      <li><a href="#">产品C</a></li>
    </ul>
  </div>
</div>

CSS样式代码：

.content-right {
  float: right;
  width: 200px;
  padding: 20px;
  border: 1px solid #ddd;
}

.content-left {
  overflow: hidden;
  width: calc(100% - 200px);
}

.content-left ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.content-left li {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

.content-left li:last-child {
  border: none;
}

通过上述实现步骤，就可以实现右侧固定宽度、左侧自适应宽度的效果。