CSS中的"div inline block"是一種常見的布局技術，它允許我們將div元素以行內塊元素的方式進行呈現。與傳統的塊級元素相比，行內塊元素能夠在一行中展示多個元素，并且可以對其設置寬度、高度以及一些其他的樣式屬性。本文將通過幾個代碼示例來詳細解釋"div inline block"的使用方法和實際應用。
## 示例一：基本使用 在CSS中，我們可以使用"display: inline-block"屬性將div元素設置為行內塊元素。下面是一個簡單的示例，展示了如何使用該屬性將兩個div元素放在同一行顯示：

html
<p>以下是一個基本的示例：</p>
<pre>
<style>
.block{
display: inline-block;
width: 150px;
height: 150px;
background-color: #ff9999;
}
</style>
<div class="block"></div>
<div class="block"></div>

在上述代碼中，我們將兩個div元素的display屬性設置為"inline-block"，這樣它們就能夠在同一行中進行顯示。

## 示例二：多行的行內塊元素 除了在同一行中顯示多個div元素，"div inline block"還可以實現多行的效果。下面的示例展示了如何使用行內塊元素在多行中顯示一組div：
html

以下是一個多行的示例：

<style>
.block{
display: inline-block;
width: 150px;
height: 150px;
background-color: #ff9999;
}
</style>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>

在上述代碼中，我們仍然將div元素的display屬性設置為"inline-block"，這樣它們會在同一行中盡可能地進行顯示。當容器的寬度不足以容納所有的行內塊元素時，剩余的元素會自動換行。

## 示例三：對齊和間距控制 除了基本的布局效果外，"div inline block"還可以通過控制對齊和間距來實現更復雜的布局需求。下面的示例展示了如何使用vertical-align屬性和margin屬性來實現對齊和間距控制：
`html

以下是一個對齊和間距控制的示例：

<style>
.block{
display: inline-block;
width: 150px;
height: 150px;
background-color: #ff9999;
vertical-align: top;
margin-right: 10px;
}
</style>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>

在上述代碼中，我們通過vertical-align屬性將行內塊元素設置為頂部對齊，通過margin-right屬性設置了元素之間的間距。

通過以上的示例，我們深入了解了"div inline block"的基本使用、多行顯示和對齊間距控制等方面的內容。在實際開發中，"div inline block"可以有效地幫助我們實現各種復雜的頁面布局需求，提升網頁的可視化效果和用戶體驗。