html
<div class="outer">
<div class="two"></div>
<div class="one"></div>
<div class="three"></div>
</div>
flex（两边定宽，中间自适应）
image.png
body{
margin: 0;
padding: 0;
}
.outer{
height: 200px;
width: 100%;
border: 1px solid red;
display: flex;
align-items: center;
justify-content: center;
min-width: 400px;
}
.one,.two,.three{
height: 100%;
background: blue;
}
.one{
order: 1;
width: 200px;
}
.two{
flex: 1;
order: 2;
background: orange;
}
.three{
order: 2;
width: 200px;
}
float+position（圣杯布局）
body{
margin: 0;
padding: 0;
}
.outer{
height: 200px;
padding: 0 200px;
overflow: hidden;
}
.one,.two,.three{
float: left;
height: 100%;
background: blue;
position: relative;
}
.one{
width: 200px;
margin-left: -100%;
left: -200px;
}
.two{
width: 100%;
background: orange;
}
.three{
width: 200px;
right: -200px;
margin-left: -200px;
}
原理：
1.容器加padding:0 200px; 给左右两边腾出各200px空间;并添加overflow:hidden;取消浮动对其他元素的影响；
2.one、two、three一起设置浮动float和相对定位relative；
2.two 占满100%；
3.one margin-left:-100%，同时left:-200px，到最左边，右边同理；
image.png
image.png
注意
为什么屏幕缩小至600px以下左右会消失不见？
因为one标签的position:relative；虽然向左left移动200px;但是原来位置仍然占据着自己200px的空间大小，所以左、右再加200px为600px；页面最小不能缩小至600px，否则会出现坍塌，可以给outer设置min-width:200px; 因为还有400px的padding大小，最小宽总共600px；或者直接给body 最小宽600px;
float（双飞翼布局）
html
<div class="outer">
<div class="two"><span class="two-inner">说法士大夫撒发生大哥仨干撒公司的公司的工时费刚发的广泛地</span></div>
<div class="one">啊所发生的好好读书的故事的功夫大使馆说的</div>
<div class="three">是的公司的轨道上的给第三个第四个梵蒂冈</div>
</div>
body{
margin: 0;
padding: 0;
min-width: 400px;
}
.outer{
height: 200px;
overflow: hidden;
}
.one,.two,.three{
float: left;
height: 100%;
background: blue;
}
.one{
width: 200px;
margin-left: -100%;
}
.two{
width: 100%;
background: orange;
}
.two>.two-inner{
display: inline-block;
padding: 0 200px;
}
.three{
width: 200px;
margin-left: -200px;
}
注意
特点是在two中加入子标签，并设置padding:0 200px；给左右腾出200px的空间大小；是圣杯布局的优化版，且最小宽度等于左右的宽度，即400px;
