我有一个 HTML 页面，其内容使用 CSS 分为左右两部分。左侧内容的高度小于右侧内容。因此，右边的内容 div 也低于左边的内容 div。最终右边内容的边界不是一条直线。
- 我们如何避免正确的内容向左移动？
- 我们怎样才能使左侧内容的高度增加到右侧内容的高度(使用 javascript)？
<html>
<head>
<title>My Page</title>
<style type="text/css">
.myContent {
width: 100%;
}
.myHeader {
}
.leftPart {
border: 1px solid blue;
width: 200px;
clear: left;
float: left;
background-color: red;
}
.rightPart {
border: 1px solid orange;
width: 100%;
background-color: beige;
}
</style>
</head>
<body>
<header>
<div class="myHeader">
H
</div>
</header>
<div id="body">
<div class="myContent">
<div class="leftPart">
A
</div>
<div class="rightPart">
<div >
<label for="Sales_and_Marketing">Sales and Marketing</label>
<input id="SalesAndMarketing" name="SalesAndMarketing" type="text" value="" />
</div>
<div >
<label for="Sales_and_Marketing">Sales and Marketing</label>
<input id="Text1" name="SalesAndMarketing" type="text" value="" />
</div>
</div>
</div>
</div>
</body>
</html>
最佳答案
fLoat 一个元素，将 margin 设置为另一个。
.leftPart {
border: 1px solid blue;
width: 200px;
float: left;
background-color: red;
}
.rightPart {
margin-left: 200px;
border: 1px solid orange;
background-color: beige;
}
更新#1
如果您考虑使用 JavaScript，您可能想看看 equalize.js .
equalize.js 是一个 jQuery 插件，用于均衡 HTML 元素的高度或宽度。
这是一个例子:
// Equalize the height of div element children
$('.myContent').equalize({children: '> div'});
这是 JSBin Demo .
更新#2
如果您正在寻找纯 CSS 解决方案，您可以使用 display: table-cell; CSS 声明。
但是，老实说，我更喜欢使用 JavaScript 而不是 this，因为使用表 display 类型, 可能会在呈现页面时改变网络浏览器的行为(浏览器可能会将整个页面视为一个表格):
#body { display: table; width: 100%; }
.myContent { display: table-row; }
.leftPart {
width: 200px;
display: table-cell;
}
.rightPart {
display: table-cell;
}
这是 JSBin Demo
关于html - 均衡左右div的高度，防止右div低于左div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18362026/