css如何实现三栏布局-创新互联

这篇文章主要介绍了css如何实现三栏布局，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

在白塔等地区，都构建了全面的区域性战略布局，加强发展的系统性、市场前瞻性、产品创新能力，以专注、极致的服务理念，为客户提供做网站、网站建设网站设计制作定制网站开发,公司网站建设,企业网站建设,品牌网站建设,成都全网营销推广,成都外贸网站建设,白塔网站建设费用合理。

前言

三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局：即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽度自适应。

css如何实现三栏布局

我们不妨假定这样一个布局：高度已知，其中左栏、右栏宽度各为300px,中间自适应，可以通过几种方法来实现？以及各自的优缺点是什么？

本文源代码请猛戳三栏布局源码，欢迎star和fork

css如何实现三栏布局

一、浮动布局




    
    Layout
    
        html * {
            padding: 0;
            margin: 0;
        }
        .layout article div {
            min-height: 150px;
        }
    


    
    
        
            .layout.float .left {
                float: left;
                width: 300px;
                background: red;
            }
            .layout.float .center {
                background: yellow;
            }
            .layout.float .right {
                float: right;
                width: 300px;
                background: blue;
            }
        
        三栏布局

// 右栏部分要写在中间内容之前

浮动解决方案

1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案； 3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案； 5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案；

css如何实现三栏布局

这种布局方式，dom结构必须是先写浮动部分，然后再中间块，否则右浮动块会掉到下一行。
浮动布局的优点就是比较简单，兼容性也比较好。但浮动布局是有局限性的，浮动元素脱离文档流，要做清除浮动，这个处理不好的话，会带来很多问题，比如父容器高度塌陷等。

二、绝对布局

css如何实现三栏布局-创新互联

三栏布局

浮动解决方案

三栏布局

绝对定位解决方案

三栏布局

flexbox解决方案

三栏布局

表格布局解决方案

三栏布局

网格布局解决方案

其他资讯