[分享]css中怎么使用多个div

在 CSS 中，我们可以使用多个 div 标签来实现对页面的布局和样式排版。div 标签是一种通用的 HTML 元素，它没有特定的语义含义，仅仅用于划分区域和容器。以下是几种使用多个 div 标签的方...

在 CSS 中，我们可以使用多个 div 标签来实现对页面的布局和样式排版。div 标签是一种通用的 HTML 元素，它没有特定的语义含义，仅仅用于划分区域和容器。以下是几种使用多个 div 标签的方法。

1. 块级元素布局

<div class="box">
  <div class="header">头部</div>
  <div class="content">内容</div>
  <div class="footer">底部</div>
</div>

.box {
  width: 300px;
  height: 300px;
}

.header {
  height: 50px;
  background-color: #999;
}

.content {
  height: 200px;
  background-color: #eee;
}

.footer {
  height: 50px;
  background-color: #999;
} 

在这个例子中，我们使用一个主容器，包含三个子容器。三个子容器固定高度，按照顺序从上到下排列。

2. 列表元素布局

<div class="list">
  <div class="item">列表1</div>
  <div class="item">列表2</div>
  <div class="item">列表3</div>
</div>

.list {
  display: flex;
  flex-direction: column;
}

.item {
  padding: 10px;
  border: 1px solid #999;
} 

在这个例子中，我们使用一个列表容器，包含三个列表项。使用 flex 布局将列表项按照垂直方向排列。

3. 分栏式布局

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

.container {
  display: flex;
}

.left {
  flex-basis: 30%;
  background-color: #eee;
}

.right {
  flex-basis: 70%;
  background-color: #999;
} 

在这个例子中，我们使用一个主容器，包含左右两个子容器。使用 flex 布局，左侧容器宽度占据主容器的 30%，右侧容器占据主容器的 70%。

总之，在 CSS 中使用多个 div 标签，可以帮助我们更好地对页面进行布局和样式排版，使用起来非常灵活和方便。