h2 {
    text-align: center;
    line-height: 60px;
    font-size: 20px;
    background: #00bcd4;
    color: #fff;
}

.g-container {
    width: 1000px;
    margin: 0 auto;
    line-height: 2;
    color: #fff;
    
    & > div {
        margin-bottom: 50px;
    }
}



.g-padmar {
    position: relative;
    overflow: hidden;

    .g-left {
        float: left;
        width: 200px;
        background: #4caf50;
        padding-bottom:9999px;
	    margin-bottom:-9999px;
    }
    
    .g-right {
        float: left;
        width: 800px;
        background: #99afe0;
        padding-bottom: 9999px;
        margin-bottom: -9999px;
    }
}

.g-border {
    position: relative;
    width: 800px;
    border-left: 200px solid #4caf50;
    background: #99afe0;
    
    &::after {
        content: ".";
        display:block;
        height: 0;
        clear: both;
    }
    
    .g-right {
        width: 800px;
    }
    
    .g-left {
        float: left;
        width: 200px;
        margin-left: -200px;
    }
}

.g-lineargradient {
    background: linear-gradient(90deg, #4caf50 0, #4caf50 20%, #99afe0 20%, #99afe0);
    overflow: hidden;
    
    .g-left {
        float: left;
        width: 200px;
    }
    
    .g-right {
        float: left;
        width: 800px;
    }
}

.g-flex {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    
    .g-left {
        flex: 200px 0 0 ;
        background: #4caf50;
    }
    
    .g-right {
        flex: auto 1 0;
        background: #99afe0;
    } 
}

.g-grid {
    display: grid;
    // align-items: stretch; 默认值
    grid-template-columns: 200px auto;
    
    .g-left {
        background: #4caf50;
    }
    
    .g-right {
        background: #99afe0;
    } 
}

.g-table {
    overflow:hidden;
	display:table;
    
    .g-left {
        width: 200px;
        display: table-cell;
        background: #4caf50;
    }
    
    .g-right {
        width: 800px;
        display: table-cell;
        background: #99afe0;
    } 
}