<div>是HTML中的一個元素，用于將文檔分割成不同的塊。在<div>元素內部，我們可以創建更多的<div>元素，從而形成一個層級結構。在某些情況下，我們希望將<div>元素左對齊并占滿一行，當內容過多時自動換行。本文將使用幾個代碼案例來詳細解釋如何實現這樣的布局效果。
，我們可以使用CSS的display屬性來實現<div>元素的左對齊。將display屬性設置為inline-block可以讓<div>元素水平排列，并且多個<div>元素可以在一行內顯示。接下來，我們可以給<div>元素設置一個寬度值，這樣當內容超過定寬時，就會自動換行。
下面是一個示例代碼：

<p><style>
div.container {
width: 100%;
}
<br>
div.item {
display: inline-block;
width: 200px;
height: 100px;
background-color: gray;
}
</style>
<br>
<p><div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>

在這個代碼示例中，我們創建了一個名為container的<div>元素，作為外部容器。然后，我們在container內部創建了四個具有相同類名item的<div>元素。這些item元素使用display: inline-block來水平排列，并且每個元素的寬度為200px，高度為100px，背景顏色為灰色。由于container元素的寬度被設置為百分之百，所以四個item元素會自動占滿一行，當容器寬度不足以容納四個item元素時，會自動換行。
在有些情況下，我們需要給<div>元素添加間距，以使它們在視覺上更加分隔。我們可以使用CSS的margin屬性來設置元素的外邊距。下面是一個示例代碼，展示如何在<div>元素之間添加間距：

<p><style>
div.container {
width: 100%;
}
<br>
div.item {
display: inline-block;
width: 200px;
height: 100px;
background-color: gray;
margin-right: 10px;
}
</style>
<br>
<p><div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>

在這個代碼示例中，我們給item元素添加了margin-right: 10px，這樣每個item元素在水平方向上會有10px的間隔。
除了使用塊級元素<div>之外，我們還可以使用行內元素<span>來實現相同的效果。行內元素<span>在默認情況下是不會換行的，所以我們需要調整一下樣式。
下面是一個示例代碼：

<p><style>
div.container {
width: 100%;
white-space: nowrap;
}
<br>
span.item {
display: inline-block;
width: 200px;
height: 100px;
background-color: gray;
margin-right: 10px;
}
</style>
<br>
<p><div class="container">
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>

在這個代碼示例中，我們通過設置container的white-space屬性為nowrap來確保item元素在一行內顯示。另外，我們也給item元素添加了margin-right屬性來增加間隔。
綜上所述，通過合理運用CSS樣式，我們可以輕松實現<div>元素下的<div>元素左對齊、占滿一行并自動換行的布局效果。無論是使用<div>元素還是<span>元素，通過設置寬度、間距等樣式，我們都能夠靈活控制布局，達到所需的效果。