<div 離左是CSS樣式中常用的一個屬性，它用于設置一個元素離其容器的左邊界的距離。通過調整這個屬性的值，我們可以實現元素在水平方向上的對齊和排列。在本文中，我們將通過幾個代碼案例來詳細解釋和說明<div 離左的使用方法和效果。
，讓我們來看一個簡單的案例。假設我們有一個容器（<div id="container">），其中包含了兩個元素（<div id="box1">和<div id="box2">）。我們想要將box1元素放置在container元素的左邊界上，并且將box2元素緊隨其后。
代碼如下所示：

<style>
#container {
width: 400px;
height: 200px;
background-color: lightgray;
padding: 10px;
}
<br>
#box1 {
width: 100px;
height: 100px;
background-color: red;
margin-left: 0;
}
<br>
#box2 {
width: 100px;
height: 100px;
background-color: blue;
margin-left: 10px;
}
</style>
<div id="container">
<div id="box1"></div>
<div id="box2"></div>
</div>

在上面的代碼中，我們通過使用<div id="container">定義了一個容器，它的寬度為400像素，高度為200像素，并且有一個灰色的背景。然后，我們使用<div id="box1">和<div id="box2">定義了兩個元素，它們的寬度和高度都為100像素，并且具有紅色和藍色的背景。為了將box1元素放置在container元素的左邊界上，我們設置了box1元素的左外邊距（margin-left）為0。而為了讓box2元素與box1元素保持一定的間距，我們設置了box2元素的左外邊距為10像素。
運行上面的代碼，我們會發現box1元素緊靠著container元素的左邊界，而box2元素則與box1元素之間有一個10像素的間距。
但是，有時候我們可能希望元素不僅僅離容器的左邊界有一定的距離，還想要元素與容器的中心對齊。這時，我們可以通過調整元素的寬度和左外邊距的值來實現。讓我們來看一個案例：
代碼如下所示：

<style>
#container {
width: 400px;
height: 200px;
background-color: lightgray;
text-align: center;
}
<br>
#box {
width: 200px;
height: 100px;
background-color: yellow;
margin-left: auto;
margin-right: auto;
}
</style>
<div id="container">
<div id="box"></div>
</div>

在上面的代碼中，我們通過設置text-align屬性為center來使得container元素內部的內容在水平方向上居中對齊。然后，我們使用<div id="box">定義了一個元素，它的寬度為200像素，高度為100像素，并且具有黃色的背景。為了讓box元素與container元素的中心對齊，我們將box元素的左外邊距和右外邊距都設置為auto。
運行上面的代碼，我們會發現box元素在container元素中居中顯示，它與container元素的左右邊界之間的距離是相等的。
起來，通過使用<div 離左屬性，我們可以輕松實現元素在水平方向上的對齊和排列。無論是將元素緊靠容器的左邊界，還是與容器的中心對齊，我們都可以通過調整元素的寬度和左外邊距的值來實現。希望本文對你理解和使用<div 離左屬性有所幫助。