CSS中经典三栏布局方案的示例分析-成都快上网建站

CSS中经典三栏布局方案的示例分析

这篇文章主要介绍CSS中经典三栏布局方案的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

专业从事成都网站设计、成都网站建设,高端网站制作设计,微信小程序开发,网站推广的成都做网站的公司。优秀技术团队竭力真诚服务,采用H5高端网站建设+CSS3前端渲染技术,成都响应式网站建设,让网站在手机、平板、PC、微信下都能呈现。建站过程建立专项小组,与您实时在线互动,随时提供解决方案,畅聊想法和感受。

1. float布局

最简单的三栏布局就是利用float进行布局。首先来绘制左、右栏:


      
      
        
        
        
      

此时可以得到左右两栏分布:

CSS中经典三栏布局方案的示例分析 

接下来再来看中间栏如何处理。我们知道对于float元素,其会脱离文档流,其他盒子也会无视这个元素。(但其他盒子内的文本依然会为这个元素让出位置,环绕在周围。)所以此时只需在container容器内添加一个正常的div,其会无视left和right,撑满整个container,只需再加上margin为left right流出空间即可:

   
    
        
            
                                       

CSS中经典三栏布局方案的示例分析 

此时看到的效果是:左、右两栏被挤到第二行。这是因为main的宽度为100%。接下来我们通过调整左、右两栏的margin来将左、中、右放在一行中:

.left {
            float: left;
            width: 100px;
            height: 200px;
            margin-left: -100%;
            background-color: red;
        }

        .right {
            float: left;
            width: 100px;
            height: 200px;
            margin-left: -100px;
            background-color: yellow;
        }

第二步,将left的margin-left设置为-100%,此时左栏会移动到第一行的首部。然后再将right的margin-left设置为其宽度的负值:-100px,则右栏也会移动到和左、中栏一行中:

CSS中经典三栏布局方案的示例分析 

不过此时还没有大功告成,我们试着在main中加入一些文字:


        
            fjlskdjflkasjdfljasdljlsjdljsdjflksadj
            
            
        
    

CSS中经典三栏布局方案的示例分析 

可以看到文字被压住了,接下来就要解决这个问题。

第三步,给container一个padding,该padding应该正好等于左、右栏的宽度:

.container {
            padding-left: 100px;
            padding-right: 100px;
        }

此时看到的结果是左、中、右三栏都整体收缩了,但文字依然被压住了。

CSS中经典三栏布局方案的示例分析 

第四步,给左、右两栏加上相对布局,然后再通过设置left和right值向外移动:

.left {
            float: left;
            width: 100px;
            height: 200px;
            margin-left: -100%;
            position: relative;
            left: -100px;
            background-color: red;
        }

        .right {
            float: left;
            width: 100px;
            height: 200px;
            margin-left: -100px;
            position: relative;
            right: -100px;
            background-color: yellow;
        }

到此为止,大功告成:

CSS中经典三栏布局方案的示例分析 

4. 双飞翼布局

双飞翼布局的前两步和圣杯布局一样,只是处理中间栏部分内容被遮挡问题的解决方案有所不同:

既然main部分的内容会被遮挡,那么就在main内部再加一个content,通过设置其margin来避开遮挡,问题也就可以解决了:




    


    
        
    
    
    

唯一需要注意的是,需要在main后面加一个元素来清除浮动。

5. flex布局

flex布局是趋势,利用flex实现三栏布局也很简单,不过需要注意浏览器兼容性:


            .container {
                display: flex;
                flex-direction: row;
            }
            .middle {
                height: 200px;
                background-color: red;
                flex-grow: 1;
            }

            .left {
                height: 200px;
                order: -1;
                margin-right: 20px;
                background-color: yellow;
                flex: 0 1 200px;
            }

            .right {
                height: 200px;
                margin-left: 20px;
                background-color: green;
                flex: 0 1 200px;
            }
        
    
    
        
            fsdfjksdjflkasjdkfjsdkljfklsjadfkljaksdljfskljffjksldfjldsfdskjflsdjfkljsdlfjsldjfklsjdkflj
            
            
        
    

有几点需要注意一下:

  1. main要首先加载就必须写在第一位,但因为left需要显示在最左侧,所以需要设置left的order为-1

  2. flex属性的完整写法是:flex: flex-grow flex-shrink flex-basis 。这也是flex实现三栏布局的核心,main设置flex-grow为1,说明多余空间全部给main,而空间不够时,仅缩小left right部分,同时因为指定了left right部分的flex-basis,所以指定了两者的宽度,保证其显示效果

6. 绝对定位

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


            .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;
            }
        
    
    
        
            fsdfjksdjflkasjdkfjsdkljfklsjadfkljaksdljfskljffjksldfjldsfdskjflsdjfkljsdlfjsldjfklsjdkflj
            
            
        
    

以上是“CSS中经典三栏布局方案的示例分析”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!


当前名称:CSS中经典三栏布局方案的示例分析
分享链接:http://kswjz.com/article/gcdjid.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流