<div> 元素是 HTML 中的一個常用元素，可以用于創建包裹文本或其他 HTML 元素的容器。默認情況下，<div> 元素在頁面中是塊級元素，從左到右占據整個可用寬度。然而，可以通過 CSS 來改變 <div> 元素的布局和位置。本文將詳細介紹如何使用 CSS 將 <div> 元素靠左對齊，并提供一些代碼案例來展示具體實現方法。
在 CSS 中，可以使用屬性 float 來改變元素的布局，并使其靠左或靠右對齊。將 float 屬性的值設置為 left，可以讓元素靠左對齊。下面是一個示例代碼，演示如何使用 CSS 的 float 屬性實現 <div> 元素靠左對齊：

p {
width: 200px;
}
<br>
div.left {
float: left;
width: 100px;
height: 100px;
background-color: #ff0000;
}

在上述代碼中，我們定義了一個

元素的寬度為 200px，這將用于演示靠左對齊的效果。接下來，我們定義了一個名為 "left" 的類，在該類的樣式中設置 float 屬性為 left。然后，我們將該類應用到一個 <div> 元素上，并為該元素指定寬度為 100px，高度為 100px，背景顏色為紅色。當頁面加載時，我們可以看到該 <div> 元素已經靠左對齊。
除了使用 float 屬性，我們還可以使用 display 屬性來改變 <div> 元素的布局方式。將 display 屬性的值設置為 inline，可以將 <div> 元素變為內聯元素，并自動排列在同一行，從而實現靠左對齊的效果。下面是一個示例代碼，演示如何使用 CSS 的 display 屬性實現 <div> 元素靠左對齊：

p {
width: 200px;
}
<br>
div.left {
display: inline;
width: 100px;
height: 100px;
background-color: #ff0000;
}

在上述代碼中，與前面示例相比，我們只是將 float 屬性改為了 display 屬性，并將其值設為 inline。其他部分的代碼保持不變。當頁面加載時，我們可以看到該 <div> 元素已經靠左對齊，并與前面的文字內容在同一行顯示。
除了使用 float 和 display 屬性，我們還可以使用 flexbox 布局來實現 <div> 元素的靠左對齊。Flexbox 是一種彈性盒模型，可以用于創建靈活的布局。下面是一個示例代碼，演示如何使用 CSS 的 flexbox 布局實現 <div> 元素靠左對齊：

.container {
display: flex;
}
<br>
div.left {
width: 100px;
height: 100px;
background-color: #ff0000;
}

在上述代碼中，我們創建了一個包裹 <div> 元素的容器，使用 flexbox 布局，設置其 display 屬性為 flex。然后，我們在容器中放置了需要靠左對齊的 <div> 元素，并為該元素指定寬度、高度和背景顏色。當頁面加載時，我們可以看到該 <div> 元素已經靠左對齊。
起來，我們可以通過使用 CSS 的 float 屬性、display 屬性和 flexbox 布局來實現 <div> 元素的靠左對齊。以上是幾個代碼案例，分別使用了這些方法來實現靠左對齊的效果。根據實際需求和具體情況，我們可以選擇適合的方法來調整 <div> 元素的布局和位置。希望這些示例能幫助你更好地理解和應用 <div> 元素的靠左對齊。