CSS三列布局（两边定宽中间自适应）

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;