<div> 是 HTML 中用于創(chuàng)建一個(gè)塊級(jí)元素的標(biāo)簽。它可以用來(lái)組合其他 HTML 元素，比如文本、圖像、表格等，以及應(yīng)用 CSS 樣式。使用 <div> 可以方便地實(shí)現(xiàn)頁(yè)面布局和樣式設(shè)計(jì)。
<div> 左右折疊是一種常見(jiàn)的布局設(shè)計(jì)，可以使頁(yè)面看起來(lái)更加簡(jiǎn)潔和美觀。通過(guò)使用 CSS 和 JavaScript，我們可以輕松地實(shí)現(xiàn)這種效果。接下來(lái)，將介紹幾個(gè)代碼案例，詳細(xì)說(shuō)明如何使用 <div> 來(lái)實(shí)現(xiàn)左右折疊布局。
第一個(gè)案例是一個(gè)基本的左右折疊布局。下面是相應(yīng)的 HTML 和 CSS 代碼：

HTML 代碼：

<div class="container">
<div class="left">
<h2>左側(cè)內(nèi)容</h2>
<p>這里是左側(cè)的內(nèi)容。</p>
</div>
<div class="right">
<h2>右側(cè)內(nèi)容</h2>
<p>這里是右側(cè)的內(nèi)容。</p>
</div>
</div>

CSS 代碼：

.container {
display: flex;
flex-direction: row;
}
<br>
.left {
width: 50%;
background-color: #f0f0f0;
}
<br>
.right {
width: 50%;
background-color: #ffffff;
}

在上述代碼中，我們創(chuàng)建了一個(gè)包含兩個(gè) <div> 元素的容器，一個(gè)用于左側(cè)內(nèi)容，一個(gè)用于右側(cè)內(nèi)容。通過(guò)設(shè)置容器的 CSS 屬性 display 為 flex，并將其子元素設(shè)置為橫向排列，即可實(shí)現(xiàn)左右折疊布局。左側(cè)的背景顏色為淺灰色，右側(cè)為白色。
第二個(gè)案例是一個(gè)帶有折疊效果的左右布局。下面是相應(yīng)的 HTML 和 CSS 代碼：

HTML 代碼：

<div class="container">
<div class="left">
<h2>左側(cè)內(nèi)容</h2>
<p>這里是左側(cè)的內(nèi)容。</p>
</div>
<div class="right">
<h2>右側(cè)內(nèi)容</h2>
<p>這里是右側(cè)的內(nèi)容。</p>
</div>
<div class="toggle-button" onclick="toggleLayout()">點(diǎn)擊切換布局</div>
</div>

CSS 代碼：

.container {
display: flex;
flex-direction: row;
}
<br>
.left {
width: 50%;
background-color: #f0f0f0;
transition: width 0.5s;
}
<br>
.right {
width: 50%;
background-color: #ffffff;
transition: width 0.5s;
}
<br>
.collapse {
width: 0;
}

JavaScript 代碼：

function toggleLayout() {
var left = document.querySelector('.left');
var right = document.querySelector('.right');
<br>
  if (left.classList.contains('collapse')) {
left.classList.remove('collapse');
right.classList.remove('collapse');
} else {
left.classList.add('collapse');
right.classList.add('collapse');
}
}

在上述代碼中，我們添加了一個(gè)按鈕元素，并應(yīng)用了 JavaScript 代碼來(lái)實(shí)現(xiàn)點(diǎn)擊按鈕時(shí)的布局切換。通過(guò)添加 CSS 過(guò)渡效果，我們可以平滑地改變左右元素的寬度，從而實(shí)現(xiàn)折疊和展開(kāi)的效果。點(diǎn)擊按鈕時(shí)，JavaScript 代碼將為左側(cè)和右側(cè)的 <div> 元素添加或移除名為 "collapse" 的類(lèi)名，以觸發(fā) CSS 過(guò)渡效果。
通過(guò)以上兩個(gè)案例，我們可以看到如何使用 <div> 元素和相應(yīng)的 CSS 和 JavaScript 代碼來(lái)實(shí)現(xiàn)左右折疊布局。這種布局設(shè)計(jì)可以提升頁(yè)面的用戶(hù)體驗(yàn)，同時(shí)也有助于展示內(nèi)容并提供更多的空間。在實(shí)際項(xiàng)目中，我們可以根據(jù)具體需求進(jìn)行修改和擴(kuò)展，以滿(mǎn)足不同的頁(yè)面布局要求。