优雅排版——左栏固定，右栏自适应的神奇布局

2024-01-29 18:37:34

左右两栏布局在网页设计中非常常见，它可以帮助网站内容井然有序地排布，提升用户体验。本文将介绍如何使用 HTML 和 CSS 实现一种特殊的左右两栏布局，左侧宽度固定，右侧自适应。这种布局方式非常灵活，适用于各种屏幕尺寸和设备。

1. HTML 结构

首先，我们来了解一下这种布局的 HTML 结构。它由一个最外层的 div 和两个内层的 div 组成，其中最外层的 div 用于包裹整个布局，两个内层的 div 分别代表左侧和右侧栏。

<div class="container">
  <div class="sidebar">
    <!-- 左侧栏的内容 -->
  </div>
  <div class="content">
    <!-- 右侧栏的内容 -->
  </div>
</div>

2. CSS 样式

接下来，我们需要为这三个 div 添加 CSS 样式。首先，我们给最外层的 div 加上边框，这样可以更清楚地看到布局的范围。

.container {
  border: 1px solid black;
}

然后，我们给左侧栏 div 设置固定的宽度，这样无论屏幕尺寸如何变化，它始终保持不变。

.sidebar {
  width: 200px;
}

最后，我们给右侧栏 div 设置自适应宽度，使其能够根据屏幕尺寸自动调整。

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

3. 示例代码

现在，我们把这些代码整合到一个完整的示例中。

<!DOCTYPE html>
<html>
<head>
  
  <style>
    .container {
      border: 1px solid black;
    }

    .sidebar {
      width: 200px;
    }

    .content {
      width: calc(100% - 200px);
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="sidebar">
      <!-- 左侧栏的内容 -->
    </div>
    <div class="content">
      <!-- 右侧栏的内容 -->
    </div>
  </div>
</body>
</html>