CSS的div等距布局是指在一個容器中，使用CSS樣式控制多個塊級元素（div）按照等距離排列和對齊的一種布局方式。這種布局常用于展示圖片、產品列表或其他需要等距排列的場景。接下來，我將用幾個代碼案例詳細解釋說明如何實現div等距布局。
案例一：使用margin負值實現div等距 給每個div元素添加相同的margin負值，即可實現等距布局。代碼如下：

```
<style>
.container {
width: 100%;
text-align: center;
}
.item {
display: inline-block;
width: 100px;
height: 100px;
background-color: #ccc;
margin-left: -20px;
margin-right: -20px;
}
</style>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
```

以上代碼中，我們給.item元素添加了負的margin-left和margin-right值，并將容器元素.text-align設置為center，使得多個item元素能夠在一行上水平居中并等距排列。
案例二：使用flex布局實現div等距 借助flex布局的特性，我們可以更方便地實現div等距布局。代碼如下：

```
<style>
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
.item {
width: 100px;
height: 100px;
background-color: #ccc;
}
</style>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
```

在以上代碼中，我們使用了display: flex來創建一個flex容器，并通過justify-content: space-between來實現item元素的等距排列，align-items: center用于垂直居中。
案例三：使用grid布局實現div等距 通過grid布局也可以實現div等距布局。代碼如下：

```
<style>
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-gap: 20px;
}
.item {
height: 100px;
background-color: #ccc;
}
</style>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
```

以上代碼中，我們使用display: grid來創建一個grid容器，并通過grid-template-columns設置每列的寬度為自動適應且最小寬度為100px，grid-gap用于設置列與列之間的間距為20px。
通過以上的代碼案例，我們可以看到如何使用margin負值、flex布局和grid布局來實現div等距布局。根據實際需求，選擇不同的布局方式來實現等距排列，靈活運用CSS樣式可以輕松實現各種排列效果。