两侧固定宽度,中间以一个响应式或者自适应进行布局,例如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 宽)