div 左對齊是指在網頁開發中，將多個<div>元素按照一行顯示，并且靠左對齊。這種布局方法常用于創建網頁的導航菜單、列表和網格系統等。
在HTML中，可以使用CSS的display屬性來控制<div>元素的布局方式。通過設置display為"inline"或"inline-block"，可以使<div>元素在同一行顯示。而設置float屬性為"left"，可以將<div>元素靠左對齊。
下面是幾個示例，詳細演示了如何使用div實現左對齊布局：
第一個示例是一個簡單的導航菜單。HTML代碼如下：

<div class="menu">
<a href="#">首頁</a>
<a href="#">產品</a>
<a href="#">服務</a>
<a href="#">關于我們</a>
</div>

CSS代碼如下：

.menu {
display: inline-block;
}
<br>
.menu a {
margin-right: 10px;
}

在這個例子中，我們將.menu元素的display屬性設置為inline-block，使.menu中的<a>元素在同一行顯示。然后，通過為<a>元素添加margin-right屬性，實現菜單項之間的間距。
第二個示例是一個網格布局。HTML代碼如下：

<div class="grid">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
</div>

CSS代碼如下：

.grid {
display: inline-block;
}
<br>
.grid-item {
width: 100px;
height: 100px;
background-color: #ccc;
margin-right: 10px;
}

在這個例子中，我們將.grid元素的display屬性設置為inline-block，使.grid-item元素在同一行顯示。每個.grid-item元素通過設置寬度、高度和背景色，形成一個方形網格。通過為.grid-item元素添加margin-right屬性，實現網格之間的間距。
第三個示例是一個列表布局。HTML代碼如下：

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

CSS代碼如下：

.list {
display: inline-block;
}
<br>
.list-item {
margin-bottom: 10px;
}

在這個例子中，我們將.list元素的display屬性設置為inline-block，使.list-item元素在同一行顯示。每個.list-item元素通過設置margin-bottom屬性，實現列表項之間的垂直間距。
通過以上幾個示例，我們可以看出，通過設置display屬性為inline-block以及其他樣式屬性，我們可以輕松實現<div>元素的左對齊布局。這種布局方法在網頁開發中得到廣泛應用，可以提供良好的用戶體驗和頁面設計效果。