平武建站

css如何实现三栏布局

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

创新互联公司-专业网站定制、快速模板网站建设、高性价比阿拉善盟网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式阿拉善盟网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖阿拉善盟地区。费用合理售后完善，10年实体公司更值得信赖。

前言

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

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解决方案

三栏布局

表格布局解决方案

三栏布局

网格布局解决方案

其他资讯