美文网首页
CSS三列布局(两边定宽中间自适应)

CSS三列布局(两边定宽中间自适应)

作者: vinterx | 来源:发表于2019-05-25 13:20 被阅读0次

    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;

    相关文章

      网友评论

          本文标题:CSS三列布局(两边定宽中间自适应)

          本文链接:https://www.haomeiwen.com/subject/utygaqtx.html