css如何實現(xiàn)圖中排版？

不考慮兼容性可以參照這樣寫（未測試）：

.container{
    width:100%;
    display:flex;
}
.left{
    width:300px;
    padding:0 10%;
    flex-shrink:0;
}
.right{
    flex-grow:1;
    padding:0 10%;
}
.left-content,.right-content{
    width:100%;
}

高度方面沒有測試。

取決于你的產(chǎn)品要求的瀏覽器兼容性，如果只兼容現(xiàn)代瀏覽器的話用 flex 非常容易實現(xiàn)，建議了解一下

實現(xiàn)這種布局還是比較簡單的，重點是外層元素的寬度問題。給你講幾種思路(實現(xiàn)外層寬度問題)

1.利用flex,grid來布局，但是兼容性是個大問題

2.利用float+padding:左邊元素設(shè)置左浮動，同時設(shè)置寬度為300像素，右邊元素設(shè)置寬度為100%，同時設(shè)置左padding為300像素

3.利用position定位:左邊元素設(shè)置寬度300像素，右邊元素設(shè)置為相對定位(相對于父元素)，同時設(shè)置left為300px，right為0

4.利用css函數(shù)calc:左邊元素設(shè)置寬度300像素，右邊元素設(shè)置右浮動，同時設(shè)置寬度為calc(100% - 300px)

5.利用BFC:左邊元素設(shè)置左浮動，同時設(shè)置寬度為300像素，右邊元素觸發(fā)css的bfc特性(不懂的話網(wǎng)上查下)，比如設(shè)置overflow:hidden;