第一种实现方式:浮动布局
将左右的div宽度设为300px,分别左右浮动,中间盒子不设宽度。注意:先写右边盒子,再写中间盒子,否则先渲染中间盒子,中间盒子会占满该行剩下的宽度,右边盒子只能换行显示,就会出现下面的情况。
第二种:绝对定位(position:absolute)
设置父盒子position:relative(相对定位),三个子盒子position:absolute,左盒子left:0,右盒子right:0;中间盒子left:300px;right:300px。
第三种:flex布局
父盒子 display:flex,左右盒子设置宽度:300px,中间盒子flex:1(flex-grow:1 flex-shrink:1 flex-basis:0%)不考虑元素尺寸自由伸缩。
第三种:flex布局
父盒子 display:flex,左右盒子设置宽度:300px,中间盒子flex:1(flex-grow:1 flex-shrink:1 flex-basis:0%)不考虑元素尺寸自由伸缩。