首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >CSS常用布局实现04-三列布局

CSS常用布局实现04-三列布局

作者头像
love丁酥酥
发布2018-08-27 15:56:34
8580
发布2018-08-27 15:56:34
举报
文章被收录于专栏:coding for lovecoding for love

1. 简介

三列布局应该是非常经典的一个布局,考虑下面这个问题,实现左中右三列,其中左右两列宽度已知为200px,中间宽度自适应。该如何实现?

2. 实现

这里我直接上代码,代码里面有详细的注释。逻辑很清楚,大家可以直接运行这段代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3-columns</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        section {
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
<!--float实现三列布局-->
<!--优点:实现简单,兼容性好-->
<!--缺点:脱离文档流,另外需要注意清除浮动-->
<section class="float-3-columns">
    <style>
        .float-3-columns .left {
            float: left;
            width: 200px;
            background: green;
        }
        .float-3-columns .right {
            float: right;
            width: 200px;
            background: blue;
        }
        .float-3-columns .main {
            background: red;
            margin-left: 200px;
            margin-right: 200px;
        }
    </style>
    <article class="wrap">
        <div class="left">left content</div>
        <div class="right">right content</div>
        <div class="main">
            <p>main content</p>
            <p>main content</p>
            <p>main content</p>
        </div>
    </article>
</section>
<!--absolute实现三列布局-->
<!--优点:实现简单,兼容性好-->
<!--缺点:脱离文档流,影响很大-->
<section class="absolute-3-columns">
    <style>
        .absolute-3-columns .wrap {
            position: relative;
        }
        .absolute-3-columns .left {
            position: absolute;
            left: 0;
            background: green;
            width: 200px;
        }
        /*如果main在right前必须要加top:0,main在right后则不需要*/
        .absolute-3-columns .right {
            position: absolute;
            right: 0;
            top: 0;
            background: blue;
            width:200px;
        }
        .absolute-3-columns .main {
            background: red;
            margin-left: 200px;
            margin-right: 200px
        }
    </style>
    <article class="wrap">
        <div class="left">left content</div>
        <div class="main">
            <p>main content</p>
            <p>main content</p>
            <p>main content</p>
        </div>
        <div class="right">right content</div>
    </article>
</section>
<!--flex实现三列布局-->
<!--优点:简单,适用性强,专门用于布局-->
<!--缺点:兼容性-->
<section class="flex-3-columns">
    <style>
        .flex-3-columns .wrap{
            display: flex;
        }
        .flex-3-columns .left {
            width: 200px;
            background: green;
        }
        .flex-3-columns .right {
            width: 200px;
            background: blue;
        }
        .flex-3-columns .main {
            flex: 1;
            background: red;
        }
    </style>
    <article class="wrap">
        <div class="left">left content</div>
        <div class="main">
            <p>main content</p>
            <p>main content</p>
            <p>main content</p>
        </div>
        <div class="right">right content</div>
    </article>
</section>
<!--grid实现三列布局-->
<!--优点:简单,适用性强,专门用于布局-->
<!--缺点:兼容性-->
<section class="grid-3-columns">
    <style>
        .grid-3-columns .wrap {
            display: grid;
            grid-template-columns: 200px auto 200px;
        }
        .grid-3-columns .left {
            background: green;
        }
        .grid-3-columns .right {
            background: blue;
        }
        .grid-3-columns .main {
            background: red;
        }
    </style>
    <article class="wrap">
        <div class="left">left content</div>
        <div class="main">
            <p>main content</p>
            <p>main content</p>
            <p>main content</p>
        </div>
        <div class="right">right content</div>
    </article>
</section>
<!--table实现3列布局-->
<!--优点:兼容性好-->
<!--缺点:特性比较复杂-->
<section class="table-3-columns">
    <style>
        /*tableb默认宽度自适应,需要加width:100%*/
        .table-3-columns .wrap {
            display: table;
            width: 100%;
        }
        .table-3-columns .left {
            display: table-cell;
            width: 200px;
            background: green;
        }
        .table-3-columns .right {
            display: table-cell;
            width: 200px;
            background: blue;
        }
        .table-3-columns .main {
            display: table-cell;
            background: red;
        }
    </style>
    <article class="wrap">
        <div class="left">left content</div>
        <div class="main">
            <p>main content</p>
            <p>main content</p>
            <p>main content</p>
        </div>
        <div class="right">right content</div>
    </article>
</section>
</body>
</html>

效果如图所示:

有的同学会说,这里前面两个并不算标准的三列布局,因为三列不等高。嗯,如果要求等高且高度已知的话,我们只要给三列设置一个固定高度即可。但如果高度未知又想实现等高,则只能用flex,grid和table布局。

3. 拓展思考

如果是上中下三列布局,该如何实现呢?还有,针对float布局的缺点,有没有什么改进呢?

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018.03.21 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1. 简介
  • 2. 实现
  • 3. 拓展思考
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档