博主头像
<CodeEra />

心存敬畏 行有所止

页面中通过简单的 CSS 样式实现双栏布局

暂无评论

在网页中通过简单的 CSS 样式实现双栏布局，推荐使用现代的布局方式，如 flexbox 或 grid，因为它们简单且功能强大。以下是两种最简单的实现方式：

1. 使用 flexbox 实现双栏布局

flexbox 是实现双栏布局最简单且灵活的方式。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>双栏布局 - Flexbox</title>
  <style>
    .container {
      display: flex; /* 使用 flexbox 布局 */
    }
    .left {
      width: 200px; /* 左侧栏固定宽度 */
      background-color: lightblue;
      height: 500px;
    }
    .right {
      flex: 1; /* 右侧栏自动填充剩余空间 */
      background-color: lightgreen;
      height: 500px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="left">左侧栏</div>
    <div class="right">右侧主体内容</div>
  </div>
</body>
</html>

关键点：

  • display: flex;：将容器设置为 flex 布局。
  • .left：固定宽度（如 200px）。
  • .right：使用 flex: 1; 自动填充剩余空间。

2. 使用 grid 实现双栏布局

CSS Grid 是一种强大的二维布局系统，实现双栏布局也非常简单。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>双栏布局 - Grid</title>
  <style>
    .container {
      display: grid; /* 使用 grid 布局 */
      grid-template-columns: 200px 1fr; /* 左侧固定宽度，右侧自动填充 */
      height: 500px;
    }
    .left {
      background-color: lightblue;
    }
    .right {
      background-color: lightgreen;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="left">左侧栏</div>
    <div class="right">右侧主体内容</div>
  </div>
</body>
</html>

关键点：

  • display: grid;：将容器设置为 grid 布局。
  • grid-template-columns: 200px 1fr;：定义两列，左侧固定宽度（如 200px），右侧自动填充剩余空间（1fr）。

3. 使用 float 实现双栏布局

虽然 float 是一种经典的方式，但不如 flexbox 和 grid 简洁，且需要清除浮动。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>双栏布局 - Float</title>
  <style>
    .container {
      width: 100%;
      overflow: hidden; /* 清除浮动 */
    }
    .left {
      width: 200px;
      float: left;
      background-color: lightblue;
      height: 500px;
    }
    .right {
      margin-left: 210px; /* 左侧栏宽度 + 间距 */
      background-color: lightgreen;
      height: 500px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="left">左侧栏</div>
    <div class="right">右侧主体内容</div>
  </div>
</body>
</html>

关键点：

  • .left：使用 float: left; 将左侧栏浮动到左侧。
  • .right：通过 margin-left 为右侧内容留出空间。
  • .container：使用 overflow: hidden; 清除浮动。

总结

  • 推荐方式：使用 flexbox 或 grid，因为它们简单且功能强大。

    • flexbox：适合一维布局（单行或单列）。
    • grid：适合二维布局（多行多列）。
  • 经典方式：float 虽然经典，但不如 flexbox 和 grid 简洁。

根据具体需求选择合适的布局方式，现代开发中推荐优先使用 flexbox 或 grid。

发表新评论