我有一个 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;
}
JSBin 演示 http://jsbin.com/ezIf/1/edit
更新#1
如果您考虑使用 JavaScript,您可能想看看equalize.js https://github.com/tsvensen/equalize.js.
均衡.js
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)