css如何实现图中排版？

Question

如图：

Answer 1

实现这种布局还是比较简单的，重点是外层元素的宽度问题。给你讲几种思路(实现外层宽度问题)

1.利用flex,grid来布局，但是兼容性是个大问题

2.利用float+padding:左边元素设置左浮动，同时设置宽度为300像素，右边元素设置宽度为100%，同时设置左padding为300像素

3.利用position定位:左边元素设置宽度300像素，右边元素设置为相对定位(相对于父元素)，同时设置left为300px，right为0

4.利用css函数calc:左边元素设置宽度300像素，右边元素设置右浮动，同时设置宽度为calc(100% - 300px)

5.利用BFC:左边元素设置左浮动，同时设置宽度为300像素，右边元素触发css的bfc特性(不懂的话网上查下)，比如设置overflow:hidden;

Answer 2

取决于你的产品要求的浏览器兼容性，如果只兼容现代浏览器的话用 flex 非常容易实现，建议了解一下

Answer 3

不考虑兼容性可以参照这样写（未测试）：

.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%;
}

高度方面没有测试。