兩欄布局三種方法（親測有效）

第一種：

只需要兩個div就能實現，主要原理是將第一個div設為浮動，並加上寬度，然后就可以實現兩欄布局，並不需要設置第二個div的任何東西。代碼如下：

                    div{
		  height:500px;
		}
		#aside{
		  width:300px;
		  background-color:yellow;
		  float:left;
		}
		#main{
		  background-color:aqua;
		  /*margin-left:300px;*/
		  /*float: left;*/
		}

            <div id = "aside" onclick="console.log(1)" contenteditable="true"></div>
	<div id = "main" onclick="console.log(2)" contenteditable="true"></div>

第二種：

需要三個div，一個做為父元素，兩個座位子元素，將父元素設為相對定位，兩個子元素設為絕對定位，然后將上邊的子元素設置寬度，將下邊的子元素設置left為上子元素的寬度值。right設置為0；就嫩實現啦，代碼如下：

            .cont{
		position: relative;
		width: 100%;
		height: 500px;
	}
	.left{
		position: absolute;
		width: 300px;
		height: 100%;
		background: red;
	}
	.right{
		height: 100%;
		background: blue;
		position: absolute;
		left:300px;
		right: 0;
	}
    
        <div class="cont">
	<div class="left"></div>
	<div class="right"></div>
        </div>

第三種：

使用彈性盒模型。三個div，父元素設置為display:flex;,上子元素為flex:3；或者設置固定寬度，下子元素為flex:7或者1；代碼如下：

            .max{display: flex;width: 100%;height: 500px;}
	.left{flex: 3;height:100%;background: red;}
	.right{flex: 7;height: 100%;background: blue;}

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