三个盒子，左右定宽，中间自适应三个盒子，左右定宽，中间自

【三个盒子，左右定宽，中间自适应】html代码

1111 1212 222

文章图片

方法一：绝对定位

.left{ position: absolute; width: 100px; height: 300px; left: 0; background: #269ABC; } .right{ position: absolute; width: 100px; height: 300px; background: #398439; right: 0; } .center{ position: absolute; left: 100px; right:100px; height:300px; background:#669900; }

方法二：flex布局
html代码

1111 1212 222

.div{ display: flex; } .left{ width: 100px; height: 300px; left: 0; background: #269ABC; } .right{ width: 100px; height: 300px; background: #398439; right: 0; } .center{ flex: 1; height:300px; background:#669900; }

3、float布局

1111 222 1212

该布局法的好处是受外界影响小，但是不足是三个元素的顺序，center一定要放在最后，center占据文档流位置，所以一定要放在最后，左右两个元素位置没有关系。当浏览器窗口很小的时候，右边元素会被挤到下一行。

.left{ width: 100px; height: 300px; float: left; background: #269ABC; } .right{ width: 100px; height: 300px; background: #398439; float: right; } .center{ margin-left: 100px; margin-right:100px; height:300px; background:#669900; }