第一种：

只需要两个div就能实现，主要原理是将第一个div设为浮动，并加上宽度，然后就可以实现两栏布局，并不需要设置第二个div的任何东西。代码如下：

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

第二种：

需要三个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，父元素设置为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;}