三栏布局的5种方案

Posted jing-tian

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了三栏布局的5种方案相关的知识,希望对你有一定的参考价值。

题目:

假设高度已知,请写出三栏布局,其中左栏、右栏宽度各为300px,中间自适应的设置方案有几种?

这里考察的是你对CSS的理解

首先初始化样式

body{
    margin:0;
    padding:0;
}

html编写

由于三栏布局HTML代码几乎差不多,下面就不过多重复编写了。

<body>
    <section>
        <h2>三栏布局</h2>
        <article class='container1'>
            <div class='left'></div>
            <div class='center'>
                <h3>这是xxx解决方案</h3>
                <p>这是三栏布局左右固定中间自适应</p>
            </div>
            <div class='right'></div>
        </article>
    </section>
</body>

注: 浮动解决方案需要将.center的类标签与.right类互换位置即可。

下面我们将通过修改css样式来解决布局方案,样式的container1可根据下面方案自行修改即可。

1.浮动解决方案

.container1 div{min-height: 100px;}
.container1 .left,
.container1 .right{width: 300px;background: #ccc;}
.container1 .left{float: left;}
.container1 .right{float: right;}
.container1 .center{background: palegreen;}

优点: 兼容性比较好;把清除浮动和周边元素的关系处理好的话。

缺点: 清除浮动,浮动以后脱离文档流,处理不好会带来很多问题,本身的局限性。

2.定位解决方案

.container2{min-height: 100px;position: relative;}
.container2 div{min-height: 100px;position: absolute;}
.container2 .left,
.container2 .right{width: 300px;background: #ccc;}
.container2 .center{background: palegreen;left: 300px;right: 300px;}
.container2 .left{left: 0;}
.container2 .right{right: 0;}

优点: 快捷,配合js使用不容易出问题。

缺点: 布局已经脱离文档流了,就意味下面所有子元素也必须脱离文档流,导致了这个方案的可使用性比较差。

3.flex box 解决方案

.container3{display: flex;}
.container3 div{min-height: 100px;}
.container3 .left,
.container3 .right{width: 300px;background: #ccc;}
.container3 .center{flex: 1;background: palegreen}

优点: 解决了上面两个方案的不足

缺点: IE8及以下不支持 flex

4.表格 table 解决方案

.container4{display: table;width: 100%;min-height: 100px;}
.container4 div{display: table-cell;}
.container4 .left,
.container4 .right{width: 300px;background: #ccc;}
.container4 .center{background: palegreen;}

优点: 轻易的做到,表格兼容性非常好,flex解决不了的(IE8不支持flex),想实现同样效果可以用表格。

缺点: 历史的诟病以外,其中某一个单元格的高度超出了的时候,两侧的单元格也是要调整高度的;有时候的场景是不需要同时增高的。

5.新技术 Grid 方案

.container5{
    width: 100%;
    display: grid;
    grid-template-rows: 100px;
    grid-template-columns: 300px auto 300px;
}
.container5 div{min-height: 100px;}
.container5 .left,
.container5 .right{background-color: palegreen;}
.container5 .center{background-color: #ccc;}

优点: 可以做很多复杂的布局,代码量也简化很多,是未来的趋势;

缺点: 兼容性问题,各种浏览器及旧版本支持不是很好。

知识扩展

在业务中的方案根据上面的优缺点来应对需求使用相应的布局方案。笔者考虑到兼容性及其他因素在这里推荐 flextable俩种方案。

三栏布局上下高度固定

看了上面那么多方案,是否自己也可以手动实现一下三栏上下高度固定,中间自适应

<body>
    <section class='flex-layout'>
        <h2>7.三栏布局上下固定, 中间自适应:flex box方案</h2>
        <article class="three_columns">
            <div class="top">上</div>
            <div class="middle">
                <h1>flex box布局</h1>
            </div>
            <div class="bottom">下</div>
        </article>
    </section>
</body>

CSS样式

.three_columns{
    width: 300px;
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 20px;
}
.three_columns .top,
.three_columns .bottom{height: 300px;background: palegreen;}
.three_columns .middle{
    flex: 1;
    background: #ccc;
    overflow: auto;
}

两栏布局

实现俩栏布局,右边固定,左边自适应

<body>
    <section>
        <h2>6.俩栏布局</h2>
        <article class='two-column'>
            <div class="left"></div>
            <div class="right">
                <h3>这是俩栏布局,右边固定,左边自适应</h3>
                <p>这是俩栏布局,右边固定,左边自适应</p>
            </div>
        </article>
    </section>
</body>

CSS样式

.two-column{display: flex;}
.two-column div{min-height: 100px;}
.two-column .right{width: 400px;background: palegreen;}
.two-column .left{flex:1;background: #ccc}

总结:语义化标签对SEO更友好。代码书写的规范方便后期的维护。

本章代码在线阅览效果地址

如果你觉得该文章能帮助到你,这里欢迎star小星星

以上是关于三栏布局的5种方案的主要内容,如果未能解决你的问题,请参考以下文章

三栏布局的5种解决方案及优缺点

小程序: 三栏布局的五种实现方式及优缺点

三栏布局的n种实现

假设高度已知,左右宽度固定,实现三栏布局的5种方法

三栏布局

三栏布局的几种方法