平衡左右div的高度,防止右div进入左下div

我有一个HTML页面,内容分为使用CSS左侧和右侧部分。 左侧内容的高度小于正确的内容。 因此,正确的内容div也在左边的content div下面。 最终,正确的内容边界不是一条直线。

  1. 我们怎样才能避免向左边蔓延正确的内容?
  2. 我们如何才能使左内容的高度增加到正确内容的高度(用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演示

更新#1

如果你考虑使用JavaScript,你可能想看看equalize.js

equalize.js是一个用于均衡HTML元素heightwidth的jQuery插件。

这里是一个例子:

 // Equalize the height of div element children $('.myContent').equalize({children: '> div'}); 

这里是JSBin演示

更新#2

如果你正在寻找一个纯粹的CSS解决scheme,你可以使用display: table-cell; CSS声明。

但是 ,说实话,我更喜欢使用JavaScript,而不是使用JavaScript,因为使用表格displaytypes可能会改变Web浏览器在呈现页面时的行为(浏览器可能会将整个页面视为表格):

 #body { display: table; width: 100%; } .myContent { display: table-row; } .leftPart { width: 200px; display: table-cell; } .rightPart { display: table-cell; } 

这里是JSBin演示

添加这个样式:

 .rightPart { margin-left: 200px; }