CSS网页布局入门教程6：左列固定，右列宽度自适应

【CSS网页布局入门教程6：左列固定，右列宽度自适应】是指在网页布局中，将页面分为左右两个部分，左侧固定宽度，右侧随着浏览器窗口大小的变化而宽度自适应的一种布局方式。接下来，我们将详细讲解如何实现这种布局方式。

HTML结构

首先，我们需要使用HTML代码编写页面结构。整个页面分为两个部分，左侧固定宽度，右侧宽度自适应，因此我们需要使用两个div元素来分别表示两个部分。

<div class="wrapper">
  <div class="sidebar">
    <!-- 左侧内容区域 -->
  </div>
  <div class="content">
    <!-- 右侧内容区域 -->
  </div>
</div>

CSS代码

接下来，我们需要使用CSS代码来对网页进行样式设计。样式设计中，我们主要需要实现两个部分的布局和样式。

布局

首先，我们需要为两个区域进行布局。左侧固定宽度，右侧宽度自适应的布局方式可以使用float的方式实现。

.sidebar {
  float: left;
  width: 200px; /* 左侧宽度固定 */
}
.content {
  margin-left: 200px; /* 右侧区域距离左侧区域宽度200px */
}

样式

其次，我们需要对两个区域进行样式设计。在此处，我们可以使用背景颜色和边框等方式进行样式设计。

.sidebar {
  float: left;
  width: 200px; /* 左侧宽度固定 */
  background-color: #ccc; /* 左侧区域背景颜色为灰色 */
  border: 1px solid #000; /* 左侧区域边框为1px黑色实线 */
}
.content {
  margin-left: 200px; /* 右侧区域距离左侧区域宽度200px */
  background-color: #fff; /* 右侧区域背景颜色为白色 */
  border: 1px solid #000; /* 右侧区域边框为1px黑色实线 */
}

以上代码实现了“左列固定，右列宽度自适应”的网页布局。在实际项目中，我们也可以根据需要进行灵活调整，如调整左侧宽度或调整边框样式等。

示例

下面，我们给出两个实际项目中应用“左列固定，右列宽度自适应”的示例。

示例一

在一个新闻资讯网站中，我们希望在首页展示最新的十篇文章，并且在右侧显示每篇文章的摘要内容。左侧展示文章标题和发布时间，并保持宽度固定。

<div class="wrapper">
  <div class="sidebar">
    <ul>
      <li><a href="#">标题 1</a></li>
      <li><a href="#">标题 2</a></li>
      <li><a href="#">标题 3</a></li>
      <!-- ... -->
    </ul>
  </div>
  <div class="content">
    <div class="article">
      <h2>文章标题</h2>
      <span class="time">发布时间</span>
      <p>摘要内容</p>
    </div>
    <!-- ... -->
  </div>
</div>

.sidebar {
  float: left;
  width: 200px;
}
.content {
  margin-left: 200px;
}
.article {
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 20px;  
}

示例二

在一个电子商务网站中，我们希望在左侧展示商品分类，右侧展示商品列表，保持左侧分类栏宽度固定，右侧商品列表宽度随浏览器窗口大小变化而自适应。

<div class="wrapper">
  <div class="sidebar">
    <ul>
      <li><a href="#">一级分类1</a></li>
      <li>
        <a href="#">一级分类2</a>
        <ul>
          <li><a href="#">二级分类1</a></li>
          <li><a href="#">二级分类2</a></li>
          <!-- ... -->
        </ul>
      </li>
      <!-- ... -->
    </ul>
  </div>
  <div class="content">
    <ul>
      <li>
        <a href="#">
          <img src="product1.jpg">
          <div class="info">
            <p>商品名称</p>
            <p>商品价格</p>
          </div>
        </a>
      </li>
      <li>
        <a href="#">
          <img src="product2.jpg">
          <div class="info">
            <p>商品名称</p>
            <p>商品价格</p>
          </div>
        </a>
      </li>
      <!-- ... -->
    </ul>
  </div>
</div>

.sidebar {
  float: left;
  width: 200px;
}
.content {
  margin-left: 200px;
}
.info {
  margin-left: 10px;
  display: inline-block;
  vertical-align: top;
}
li {
  float: left;
  width: 33.33%;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #ccc;
}
img {
  max-width: 100%;
}