左右兩欄div布局，高度自適應

頁面結構如下：

<div class="container">
    <div class="left">
        left
    </div>
    <div class="right">
        right
    </div>
</div>

　　需要這樣的效果：左右兩邊高度有內容多少，自適應

 

下面提供三種方式：

第一種： 使用display:table;

.container {
				display: table;
				width: 80%;
			}
			
			.container .left,
			.container .right {
				display: table-cell;
			}
			
			.container .left {
				width: 20%;
				background: pink;
			}
			
			.container .right {
				width: 80%;
				background: deeppink;
			}

　　利用的table本身的自適應特性，兼容性好，容易使用

 

 

方法2：利用margin和padding

.container {
				overflow: hidden;
				width: 400px;
			}
			.container .left,
			.container .right {
				float: left;
				margin-bottom: -10000px;
				padding-bottom: 10000px;
			}
			.container .left {
				width: 20%;
				background: pink;
			}
			.container .right {
				width: 80%;
				background: deeppink;
			}

　　這個原理是，左右的內容高度並沒有跟着變化，只是由margin和padding撐出了一些地方，然后被隱藏了，當有一邊的高度由內容撐起來之后，另一邊的看似也跟着起來了，實際上那部分是padding

 

 

方法3：flex，兼容性IE10下面不能使用，手機端也有些兼容

.container {
				display: flex;
				width: 400px;
			}
			
			.container .left {
				width: 20%;
				background: pink;
			}
			
			.container .right {
				width: 80%;
				background: deeppink;
			}