等高布局: N列的高度是相同的。实现原理是通过margin-bottom和padding-bottom设置一个很大并且和相加相互取消的值。
* {
box-sizing :border-box;
}
body {
background-color: #ddd;
text-align: center;
}
.container {
overflow: hidden;
}
.main, .left {
background-color: #fff;
margin-bottom: -100000px;
padding-bottom: 100000px;
}
.main {
margin-left: 210px;
float: left;
width: calc(100% - 210px);
}
.left {
float: left;
width: 200px;
margin-left: -100%;
}
<h1>等高</h1>
<div class="container">
<div class="main">
<p>this is main</p>
<p>this is main</p>
<p>this is main</p>
<p>this is main</p>
<p>this is main</p>
</div>
<div class="left">left</div>
</div>