div元素是HTML中最常用的容器元素，可以用于创建各种布局。以下是一些常见的div布局示例：
1、DIV垂直布局：
html代码：
<div class="container">
<div class="box">内容1</div>
<div class="box">内容2</div>
<div class="box">内容3</div>
</div>
CSS代码：
.container {
display: flex;
flex-direction: column;
}.box {
padding: 10px;
margin: 5px;
background-color: #e0e0e0;
}
在上述示例中，.container具有display: flex;属性，使其成为一个弹性容器。使用flex-direction: column;可以将子元素在垂直方向上进行堆叠。每个子元素都有.box类，并具有一些样式，例如内边距和背景颜色。
2、div水平布局：
html代码：
<div class="container">
<div class="box">内容1</div>
<div class="box">内容2</div>
<div class="box">内容3</div>
</div>
CSS代码：
.container {
display: flex;
}.box {
flex: 1;
padding: 10px;
margin: 5px;
background-color: #e0e0e0;
}
在上述示例中，.container仍然是一个弹性容器，但没有指定flex-direction属性，默认为水平方向。.box元素具有flex: 1;属性，使它们平均分配可用空间。这样，它们将水平排列在一行上。
3、div网格布局：
html代码：
<div class="container">
<div class="box">内容1</div>
<div class="box">内容2</div>
<div class="box">内容3</div>
<div class="box">内容4</div>
<div class="box">内容5</div>
<div class="box">内容6</div>
</div>
css代码：
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}.box {
padding: 10px;
background-color: #e0e0e0;
}
在上述示例中，.container是一个网格容器，使用display: grid;属性。通过grid-template-columns属性，我们定义了一个3列的网格布局，每列的宽度均为1份(1fr)。grid-gap属性定义了网格之间的间隔。每个子元素都是.box类，并具有一些样式。
这些只是一些常见的div布局示例，你可以根据需要进行更多的自定义和调整。CSS提供了丰富的布局功能，可以实现各种复杂的页面布局。