先看一個案例： 左邊是導航部分，右邊是詳細內容，兩者的高度都是不固定的，左邊有可能會比右邊高，反之亦然。也就是說兩者的高度始終是保持一致的！

下面進入正題：

1、利用border實現

<div id="wrapper">
	<div class="left">
		<p>left</p>
		<p>left</p>
		<p>left</p>
		<p>left</p>
	</div>
	<div class="right">
		<p>right</
 
p>
		<p>right</p>
	</div>
</div>

#wrapper {
    display: inline-block;
    width: 400px;
    border-left: 200px solid #6ee0b6;
    background-color: #c3c3ff;
}

.left {
    float: left;
    width: 200px;
    margin-left: -200px;
    border-right: 10px solid #999;
    box-sizing: border-box;
 

    padding: 20px;
}
.right {
    float: left;
    margin-left: -10px;
    border-left: 10px solid #999;
    padding: 20px;
}

效果如下：

右邊高的效果如下：

當然可以利用border-right，實現三列等高。但是這種方法最多只能實現三列等高。不過利用這個方法已經可以完美解決開頭說的那個案例了！ 相容IE8+

不過探索還是要繼續~

2、利用css中的table屬性實現

<div class="table">
	<div class="tableRow"
 
>
		<div class="tableCell cell1">
			<div>
				<p>left</p>
				<p>left</p>
				<p>left</p>
			</div>
		</div>

		<div class="tableCell cell2">
			<div>
				<p>center</p>
				<p>center</p>
				<p>center</p>
				<p>center</p>
			</div>
		</div>

		<div class="tableCell cell3">
			<div>
				<p>right</p>
				<p>right</p>
			</div>
		</div>

	</div>
</div>

.table {
    width: 500px;
    display: table;
}

.tableRow {
    display: table-row;
}

.tableCell {
    display: table-cell;
}

.cell1 {
    background: #6ee0b6;
}

.cell2 {
    background: #f3777b;
}

.cell3 {
    background: #c3c3ff;
}

效果圖如下：

這種方法可以實現任意多列等高！ 相容IE8+

3、利用 margin 和 padding 對衝實現

這種方法最簡單，只需要將padding值設的足夠大，然後用相同大的負的margin來對衝。

<div id="wrapper">
	<div class="column left">
		<p>left</p>
		<p>left</p>
	</div>
	<div class="column center">
		<p>center</p>
		<p>center</p>
		<p>center</p>
		<p>center</p>
	</div>
	<div class="column right">
		<p>right</p>
		<p>right</p>
	</div>
</div>

#wrapper {
    overflow: hidden;
}

.column {
    float: left;
    width: 200px;
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}
.left {
    background: #6ee0b6;
}
.center {
    background: #f3777b;
}
.right {
    background: #c3c3ff;
}

效果圖如下：

同樣的，這種方法也可以實現任意多列等高！ 相容IE6+

END!