div 溢出 撐開

當我們在 HTML 中使用<div>元素來布局頁面時，經常會遇到一個問題：當<div>中的內容過多時，會導致該<div>元素溢出并撐開父元素的情況。

解決這個問題的方法有很多，下面將通過幾個代碼案例來詳細說明。

案例一：

在這個案例中，我們有一個包含長文本的<div>元素，并將其設置為具有固定寬度和高度的大小盒子。

<div class="container">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel porta turpis. Mauris finibus quam ex, ut feugiat elit feugiat non. Etiam vehicula ante vitae turpis consequat congue. Fusce sit amet accumsan ante. Nullam vitae consequat purus.
</div>
</div>
<br>
<style>
.container {
width: 200px;
height: 100px;
border: 1px solid #000;
overflow: hidden;
}
<br>
.content {
width: 100%;
height: 100%;
padding: 10px;
box-sizing: border-box;
overflow: auto; 
}
</style>

在上面的代碼中，我們將外層的<div>元素（class="container"）設置了固定的寬度（200px）和高度（100px），以及一個黑色的邊框。內層的<div>元素（class="content"）設定了100%的寬度和高度，并設置了10px的內邊距，并使用了box-sizing:border-box來確保內邊距和邊框不會撐開元素。

通過設置外層<div>元素的overflow屬性為hidden，可以隱藏內容溢出的部分。內層<div>元素的overflow屬性設置為auto時，如果內容長度超過容器的高度，會顯示滾動條以便查看全部內容。

案例二：

在這個案例中，我們有一個包含圖片的<div>元素，并希望圖片超出容器時顯示滾動條。

<div class="container">
<img src="image.jpg">
</div>
<br>
<style>
.container {
width: 200px;
height: 100px;
border: 1px solid #000;
overflow: auto;
}
</style>

在上述代碼中，我們設置外層<div>元素具有固定的寬度（200px）和高度（100px），并希望當圖片的大小超過容器時顯示滾動條。

通過將外層<div>元素的overflow屬性設置為auto，可以讓內容超過容器時顯示滾動條。這樣，如果圖片的尺寸大于容器的尺寸，用戶可以通過滾動條查看全部內容。

案例三：

在這個案例中，我們有一個包含很多塊級元素的<div>元素，并希望當內容溢出時自動換行。

<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
...
</div>
<br>
<style>
.container {
width: 200px;
border: 1px solid #000;
overflow: auto;
}
<br>
.item {
width: 80px;
height: 50px;
border: 1px solid #000;
float: left;
margin: 10px;
}
</style>

在上面的代碼中，我們設置外層<div>元素具有固定的寬度（200px），并將其內部的塊級元素（class="item"）設置為固定的寬度（80px）和高度（50px），并使用float屬性將它們浮動在一行上。

通過將外層<div>元素的overflow屬性設置為auto，可以讓內容超出容器寬度時自動換行并顯示滾動條。這樣，如果內容超過容器的寬度，用戶可以通過滾動條進行水平滾動以查看全部內容。

通過上述案例，我們可以看到如何使用<div>元素來處理內容溢出和撐開的問題。根據實際需求，我們可以使用不同的方法來解決這個問題。

總之，通過合理地設置<div>元素的大小、使用overflow屬性來控制溢出內容的顯示方式，我們可以更好地控制頁面布局的效果，確保內容顯示的美觀和一致性。