CSS经典三栏布局方案（6种方法）

时间：2017-12-05

有几点需要注意一下：

main要首先加载就必须写在第一位，但因为left需要显示在最左侧，所以需要设置left的order为-1
flex属性的完整写法是：flex: flex-grow flex-shrink flex-basis 。这也是flex实现三栏布局的核心，main设置flex-grow为1，说明多余空间全部给main，而空间不够时，仅缩小left right部分，同时因为指定了left right部分的flex-basis，所以指定了两者的宽度，保证其显示效果

6. 绝对定位

绝对定位的方式也比较简单，而且可以优先加载主体：

        <style type="text/css">
            .container {
            }
            .middle {
                position: absolute;
                left: 200px;
                right: 200px;
                height: 300px;
                background-color: yellow;
            }

            .left {
                position: absolute;
                left: 0px;
                width: 200px;
                height: 300px;
                background-color: red;
            }

            .right {
                position: absolute;
                right: 0px;
                width: 200px;
                background-color: green;
                height: 300px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="middle">fsdfjksdjflkasjdkfjsdkljfklsjadfkljaksdljfskljffjksldfjldsfdskjflsdjfkljsdlfjsldjfklsjdkflj</div>
            <div class="left"></div>
            <div class="right"></div>
        </div>
    </body>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

共3页:

3/3下一篇

上一篇：浅谈css3中calc在less编译时被计算的解决办法 下一篇：浅谈css3新单位vw、vh、vmin、vmax的使用详解

CSS经典三栏布局方案（6种方法）

相关文章

最新文章