一种后遗症比较多的多列自动对齐
在执行同一容器里的两列或者多列，不定高自动对齐的时候，最好的办法是使用JS。
下边这个方法虽然没使用JS完成了，但是后遗症比较多，不推荐使用。
仅仅是明白就好了。偶尔在不复杂的页面里可以用用。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
body {
background-color: #fff;
height:100%;
font-size:12px;
text-align:center;
}
html{height:100%;}
.box{height:100%; background:#f9f9f9; width:450px; float:left; padding-left:50px;}
.box2{float:left; background:#ff9900; width:400px;height:auto; overflow:hidden;}
.left{width:190px; background:#ff6600; float:left; margin-right:10px;height:auto; padding-bottom:10000px !important; margin-bottom: -10000px !important;}
.right{width:200px; background:#ff6600; float:left;height:auto; padding-bottom: 10000px !important; margin-bottom: -10000px !important; }
-->
</style></head>
<body>
<div class="box">
<div class="box2">
<div class="left">
<p>1111</p>
<p>1111</p>
<p>1111</p>
<p>1111</p>
<p>1111</p>
<p>1111</p>
</div>
<div class="right">我自动跟右边对齐</div>
</div>
</div>
</body>
</html>
提示：你可以先修改部分代码再运行。