<div 左右登高是一種常見的網頁布局技術，它將網頁內容分為左右兩個部分，并讓兩個部分等高，無論內容多少，無論瀏覽器窗口大小如何改變。這種布局常用于創建響應式設計、多列布局等。在下面的幾個代碼案例中，我將詳細解釋<div> 左右登高的實現方法。

案例一：

<style>
.container {
display: flex;
}
.left-column, .right-column {
flex: 1;
border: 1px solid black;
}
</style>
<div class="container">
<div class="left-column">
<!-- 左側內容 -->
</div>
<div class="right-column">
<!-- 右側內容 -->
</div>
</div>

在這個案例中，我們使用了display: flex;屬性來將容器元素設為彈性布局，并使用flex: 1;屬性對左右兩個列進行等分。兩個列都被設置了border: 1px solid black;屬性，以便更清楚地展示等高的效果。這樣，左右兩個列的高度會自動適應內容的高度，保持等高。

案例二：

<style>
.container {
display: grid;
grid-template-columns: 1fr 1fr;
}
.left-column, .right-column {
border: 1px solid black;
}
</style>
<div class="container">
<div class="left-column">
<!-- 左側內容 -->
</div>
<div class="right-column">
<!-- 右側內容 -->
</div>
</div>

在這個案例中，我們使用了 CSS Grid 布局來實現左右登高。通過設置容器元素的grid-template-columns: 1fr 1fr;屬性，我們將網格分為兩列，并使用1fr占比來使兩列等寬。兩個列都被設置了border: 1px solid black;屬性，以便更清楚地展示等高的效果。同樣地，左右兩個列的高度會自動適應內容的高度，保持等高。

案例三：

<style>
.container {
display: table;
table-layout: fixed;
width: 100%;
}
.column {
display: table-cell;
border: 1px solid black;
}
</style>
<div class="container">
<div class="column">
<!-- 左側內容 -->
</div>
<div class="column">
<!-- 右側內容 -->
</div>
</div>

在這個案例中，我們將容器元素設為表格布局display: table;，并設置表格布局的自動調整table-layout: fixed;。通過將容器元素的寬度設為 100%，我們確保了兩個列的寬度平分。兩個列都被設置了border: 1px solid black;屬性，以便更清楚地展示等高的效果。同樣地，左右兩個列的高度會自動適應內容的高度，保持等高。

綜上所述，通過使用不同的布局技術，我們可以實現<div> 左右登高效果。這種布局技術可以在網頁設計中提供更靈活、更適應多種設備的布局方式，為用戶提供更好的瀏覽體驗。