CSS 布局 2-栏固定流式

在本文中，我们将介绍 CSS 中的 2-栏布局，并提供固定宽度和流式宽度的示例。CSS (层叠样式表) 是一种用于网页设计的标记语言，它定义了网页的布局和外观。

阅读更多：CSS 教程

2-栏布局

2-栏布局是一种常见的网页布局，它将页面分成两个主要的竖直区域。其中一个区域通常用于显示主要内容，另一个区域用于显示辅助内容，如侧边栏、导航菜单或广告。

2-栏布局可以使用 CSS 中的不同方法实现，包括使用浮动、定位和弹性布局。在下面的示例中，我们将展示两个使用固定宽度和流式宽度的2-栏布局。

固定宽度布局

固定宽度布局使用固定的像素值来定义每个栏的宽度。这意味着无论浏览器窗口的大小如何，两个栏的宽度都保持不变。

下面是一个简单的 CSS 代码示例，实现了一个具有固定宽度的2-栏布局：

.container {
  width: 800px;
  margin: 0 auto;
}

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

.content {
  float: left;
  width: 600px;
  background-color: white;
}

在上面的示例中，.container 类定义了一个容器，它具有固定的宽度为 800px，并在页面水平居中对齐。.sidebar 类定义了辅助栏的样式，宽度为 200px，并设置了浮动属性。.content 类定义了主内容栏的样式，宽度为 600px，并设置了浮动属性。

流式宽度布局

流式宽度布局使用百分比来定义每个栏的宽度。这意味着无论浏览器窗口的大小如何，两个栏的宽度都会随着窗口大小的变化而自动适应。

下面是一个简单的 CSS 代码示例，实现了一个具有流式宽度的2-栏布局：

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.sidebar {
  float: left;
  width: 25%;
  background-color: lightgray;
}

.content {
  float: left;
  width: 75%;
  background-color: white;
}

在上面的示例中，.container 类定义了一个容器，它具有 100% 的宽度，并设置了最大宽度为 1200px。这样可以确保在较大的屏幕上保持合理的布局。.sidebar 类定义了辅助栏的样式，宽度为容器宽度的 25%。同样地，.content 类定义了主内容栏的样式，宽度为容器宽度的 75%。