<div> 多行合并是一種在 HTML 中使用 <div> 元素將多個元素合并在一起以形成一個整體的技術。它允許開發人員創建更復雜的布局和樣式，以實現各種功能和效果。
<div> 元素是 HTML 中一個非常重要的元素，可以用來創建盒子和容器，用于包裝其他元素。通過添加樣式和屬性，<div> 元素可以實現各種復雜的布局和結構。
在下面的幾個代碼案例中，我們將詳細介紹如何使用 <div> 多行合并的技術。

案例1：

這是一個簡單的示例，展示了如何使用 <div> 元素將兩個段落合并在一起。我們使用了 CSS 的 display: flex 屬性來將兩個

元素排列在一行。

<style>
.container {
display: flex;
}
</style>
<br>
<div class="container">
<p>這是第一個段落。</p>
<p>這是第二個段落。</p>
</div>

案例2：

這個例子演示了如何使用 <div> 多行合并來創建一個簡單的文本區域。我們使用了 CSS 的 white-space: pre-wrap 屬性來保留文本中的空格和換行。

<style>
.text-area {
white-space: pre-wrap;
}
</style>
<br>
<div class="text-area">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Nullam ultricies tortor vel turpis faucibus, sed maximus nisi efficitur. 
Vestibulum bibendum tristique justo, sit amet consequat nunc tristique non. 
</div>

案例3：

這個例子展示了如何使用 <div> 多行合并來創建一個響應式圖片網格。我們使用了 CSS 的 grid 和 media queries 屬性來調整圖片在不同屏幕尺寸下的布局。

<style>
.image-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 10px;
}
<br>
  .image {
width: 100%;
height: auto;
}
<br>
  @media (max-width: 768px) {
.image-grid {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
}
</style>
<br>
<div class="image-grid">
<div class="image">
<img src="image1.jpg" alt="Image 1">
</div>
<div class="image">
<img src="image2.jpg" alt="Image 2">
</div>
<div class="image">
<img src="image3.jpg" alt="Image 3">
</div>
<div class="image">
<img src="image4.jpg" alt="Image 4">
</div>
</div>

通過這幾個案例，我們可以看到使用 <div> 多行合并的技術可以實現各種復雜的布局和效果。無論是簡單的段落合并、文本區域還是響應式圖片網格，<div> 多行合并都為開發人員提供了更多的自由度和靈活性。希望這些例子能幫助你更好地理解和應用這一技術。