【三栏布局】

两侧固定宽度，中间以一个响应式或者自适应进行布局，例如CSDN和淘宝都是通过这种方式来进行布局。

 

1.利用浮动+margin

2.利用flex布局（常用）（父盒子设置display:flex,给中间的盒子设置flex为1）

3.利用圣杯布局

DOM结构(一个大的最外层盒子 MAIN盒子 左盒子 右盒子)先全部设置左浮动  给左右盒子设置宽度 给大的盒子设置外边距 外边距等于宽度 给MAIN盒子宽度设置为100%  再让左盒子的左外边距-100% positon:relative left:-200px 右盒子也设置relative margin-left:-200px right:-200px

4.利用网格布局（Grid）布局（常用）设置行列)（给列设置宽 auto 宽） 

标签：flex,盒子,三栏,布局,宽度,设置,200px
来源： https://blog.csdn.net/Rick599513/article/details/122020657