第一種：

只需要兩個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>