div css布局大全案例

以下是一些常见的 CSS 布局案例：

1. 两栏布局

<div class="container">
  <div class="left-column">左侧栏</div>
  <div class="right-column">右侧栏</div>
</div>

使用 CSS 样式：

.container {
  display: flex;
}

.left-column {
  width: 25%;
}

.right-column {
  width: 75%;
}

2. 三栏布局

<div class="container">
  <div class="left-column">左侧栏</div>
  <div class="middle-column">中间栏</div>
  <div class="right-column">右侧栏</div>
</div>

使用 CSS 样式：

.container {
  display: flex;
}

.left-column {
  width: 25%;
}

.middle-column {
  width: 50%;
}

.right-column {
  width: 25%;
}

3. 等高布局

<div class="container">
  <div class="left-column">左侧栏</div>
  <div class="right-column">右侧栏</div>
</div>

使用 CSS 样式：

.container {
  display: flex;
}

.left-column {
  width: 50%;
  height: 300px;
}

.right-column {
  width: 50%;
  height: 300px;
}

这些示例只是 CSS 布局的冰山一角。有许多其他的布局技巧和方法，因此建议您深入学习 CSS 布局以实现更多复杂的布局需求。