資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學如何保持兩個並排的 div 元素高度一致？
我們需要保持兩個並排的 div 高度一致，這樣如果向任何一個 div 新增更多內容，另一個 div 的大小也會匹配。以下兩個示例涵蓋了這一點：
- 使用 HTML 保持兩個並排的 div 元素高度一致
- 使用 JavaScript 保持兩個並排的 div 元素高度一致
讓我們逐一檢視示例：
使用 HTML 保持兩個並排的 div 元素高度一致
示例
我們將使用以下程式碼來保持兩個並排的 div 元素高度一致：
<!DOCTYPE html>
<html>
<head>
<style>
.container{
display: table-row;
}
.box1{
display: table-cell;
background: red;
color: white;
}
.box2{
display: table-cell;
background: orange;
color: white;
}
</style>
</head>
<body>
<h1>Two Divs</h1>
<div class = "container">
<div class ="box1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
</div>
<div class = "box2">
Nunc et nisl et justo viverra fermentum.<br/>
Nunc et nisl et justo viverra fermentum.<br/>
Nunc et nisl et justo viverra fermentum.<br/>
Nunc et nisl et justo viverra fermentum.<br/>
Nunc et nisl et justo viverra fermentum.<br/>
</div>
</div>
</body>
</html>
輸出
向第二個 div 新增更多內容，您會看到兩個 div 的大小都會增加：
輸出
使用 JavaScript 保持兩個並排的 div 元素高度一致
示例
我們將使用以下程式碼使用 JavaScript 保持兩個並排的 div 元素高度一致。`height()` 用於匹配兩個 div 的高度：
<!DOCTYPE html>
<html>
<head>
<style>
.box1{
display: table-cell;
background: red;
color: white;
}
.box2{
display: table-cell;
background: orange;
color: white;
}
</style>
</head>
<body>
<div class ="box1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
</div>
<div class = "box2">
Nunc et nisl et justo viverra fermentum.<br/>
Nunc et nisl et justo viverra fermentum.<br/>
Nunc et nisl et justo viverra fermentum.<br/>
Nunc et nisl et justo viverra fermentum.<br/>
</div>
<script>
$(".box2").height($(".box1").height());
</script>
</body>
</html>
輸出
更新於：2022年12月6日
831 次檢視
廣告