實現等高列的常見方法是使用 display: table-cell 或 flex 布局。1. 使用 table-cell 時，將容器設為 display: table-row，子元素設為 display: table-cell，它們會自動等高對齊，適合兼容老舊瀏覽器；2. 使用 flex 布局時，只需將容器設為 display: flex，子元素默認會拉伸至相同高度，更適合現代響應式設計；3. 需注意 table-cell 可能影響內部元素定位和百分比高度計算，導致布局異常；4. 若項目需兼容 ie8 及以下版本，推薦 table-cell，否則建議優先選用 flex 或 grid 布局，因其更靈活且語義清晰。兩種方式各有優劣，選擇應基于具體需求與兼容性考量。
在網頁布局中，實現等高列是一個常見需求。比如，一個兩欄布局中，無論左右內容多少，都需要兩邊高度一致。很多人會想到用表格的 table-cell 屬性來實現，那具體該怎么用呢？其實方法不難，但有幾個關鍵點需要注意。
一、使用 display: table-cell 實現等高列
最直接的方法是利用 css 的 display: table-cell 屬性。它的行為就像 html 表格中的單元格（td），會自動拉伸以匹配同級元素的最大高度。
結構上一般這樣寫：
立即學習“前端免費學習筆記（深入）”；
<div class="row"> <div class="col">左側內容</div> <div class="col">右側內容較多，可能更高</div> </div>
對應的 CSS 是：
.row { display: table-row; } .col { display: table-cell; vertical-align: top; }
這樣兩個 .col 就會保持等高，并且隨著內容變化自動調整高度。這個方法兼容性不錯，適用于大多數現代瀏覽器。
二、flex 布局也能實現等高列
除了 table-cell，Flexbox 也是實現等高列的常用方式。它不需要設置 display: table-cell，而是通過彈性盒子的默認特性來實現。
HTML 結構不變，CSS 改成：
.row { display: flex; } .col { flex: 1; }
這時兩個列的高度也會對齊，因為 Flex 容器下的子項默認會拉伸以填滿容器的高度。這種方法更簡潔，也更適合響應式設計。
三、注意：table-cell 對嵌套的影響
雖然 table-cell 很方便，但有一個容易忽略的問題：它會影響內部元素的定位和百分比高度計算。例如，如果你在一個 table-cell 元素里使用 position: absolute，它的定位基準可能會變得不太直觀。
此外，如果某個子元素設置了 height: 100%，那么它會試圖占滿父元素的高度，而由于 table-cell 自身高度由內容決定，這可能導致意外結果。因此，在使用 table-cell 時，要注意內部結構的樣式是否會被影響。
四、什么時候該用 table-cell？
如果你需要兼容 IE 瀏覽器（尤其是 IE8 及以下），table-cell 是個不錯的選擇。但在現代項目中，如果只是想實現等高列，建議優先考慮 Flex 或 Grid 布局，它們更靈活，語義也更清晰。
不過，table-cell 在某些特定場景下還是很有用的，比如你確實需要類似表格的對齊效果，或者希望多個列的內容垂直對齊，這時候配合 vertical-align 使用非常方便。
基本上就這些了。兩種方式都能實現等高列，選哪個取決于你的項目需求和瀏覽器兼容性要求。table-cell 雖老但實用，Flex 更現代也更強大，看你怎么用了。
