首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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

作者：hyc_erasme | 来源：互联网 | 2023-05-17 20:15
这篇文章主要介绍CSS中经典三栏布局方案的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！1.float布局最简单

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

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实现三栏布局也很简单，不过需要注意浏览器兼容性：

    
    
        
            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. 绝对定位

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

    
    
        
            fsdfjksdjflkasjdkfjsdkljfklsjadfkljaksdljfskljffjksldfjldsfdskjflsdjfkljsdlfjsldjfklsjdkflj
            
            
        
    

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


推荐阅读
author-avatar
hyc_erasme
新手上路、多多照顾
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有