CSS之布局系列--三列布局(中间固定，两边自适应)--方法/实例-蒲公英云

CSS之布局系列--三列布局(中间固定，两边自适应)--方法/实例

原文网址：CSS之布局系列—三列布局—中间固定，两边自适应—方法/实例_IT利刃出鞘的博客-CSDN博客

简介

本文用示例介绍CSS三列布局的方案。

三列布局，即：左，中，右。有两种方案：1.两边固定，中间自适应；2.中间固定，两边自适应。本文介绍第2种方案，第1种方案见：CSS—三列布局—两边固定，中间自适应—实例_IT利刃出鞘的博客-CSDN博客。

中间固定，两边自适应，一般不太常用。比如：一个网站要适应不同的电脑屏幕大小，一般是确定两边的宽度，中间自适应。

中间固定，两边自适应，一共有如下几种方案：

flex布局（推荐）
浮动布局（float）
calc计算
grid布局
负的margin布局（不推荐）

方案1：flex(推荐)

利用flex-grow进行布局，详见 flex-grow属性。

优点

简单

缺点

不兼容旧浏览器

示例

代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>This is title</title>
    <style>
        html, body {
            margin: 0; /*若不设置，默认为8px*/
        }
        .container>div {
            height: 100px;
        }
        .container {
            display:flex;
            flex-direction:row;
        }
        .aside-left {
            flex-grow: 1;
            width: 300px;
            background-color: #a9ff29;
        }
        .middle {
            width:1600px;
            left: 300px;
            right: 200px;
            background-color: #ffb91b;
        }
        .aside-right {
            flex-grow: 1;
            width: 200px;
            background-color: #40c3ff;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="aside-left">左侧</div>
    <div class="middle">中间</div>
    <div class="aside-right">右侧</div>
</div>
</body>
</html>

结果

方案2：浮动(float)

优点

兼容旧浏览器

缺点

主体内容需要放到最后，当页面元素较多时候对开发不友好。

示例

代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>This is title</title>
    <style>
        html, body {
            margin: 0; /*若不设置，默认为8px*/
        }
        .container>div {
            height: 100px;
        }
        .aside-left, .aside-right {
            float: left;
            width: 300px;
            background-color: #a9ff29;
        }
        .middle {
            margin: 0 200px 0 300px;
            background-color: #ffb91b;
        }
        .aside-right {
            float: right;
            width: 200px;
            background-color: #40c3ff;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="aside-left">左侧</div>
    <div class="aside-right">右侧</div>
    <div class="middle">中间</div>
</div>
</body>
</html>

结果

方案3：采用calc计算

优点

兼容旧浏览器

缺点

两边只能一样宽。

示例

代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>This is title</title>
    <style>
        html, body {
            margin: 0; /*若不设置，默认为8px*/
        }
        .container>div {
            height: 100px;
        }
        .container {
            width: 100%;
        }
        .aside-left {
            float: left;
            width: calc(50% - 800px);
            background-color: #a9ff29;
        }
        .middle {
            float: left;
            width: 1600px;
            background-color: #ffb91b;
        }
        .aside-right {
            float: left;
            width: calc(50% - 800px);
            background-color: #40c3ff;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="aside-left">左侧</div>
    <div class="middle">中间</div>
    <div class="aside-right">右侧</div>
</div>
</body>
</html>

结果

方案4：网格(grid)（不推荐）

网格布局是比较新的东西，这个布局是新的css标准下的特性。在响应式布局大行其道的移动互联网时代，bootstrap之类的是对栅格化布局框架非常流行，而网格布局，就是对栅格布局的标准化实现。

优点

简单、清晰

缺点

两边只能一样宽。
新CSS标准的特性，兼容性不太好

示例

代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>This is title</title>
    <style>
        html, body {
            margin: 0; /*若不设置，默认为8px*/
        }
        .container {
            display:grid;
            grid-template-rows: 100px;
            grid-template-columns: auto 1600px auto;
        }
        .middle {
            background-color: #ffb91b;
        }
        .aside-left {
            background-color: #a9ff29;
        }
        .aside-right {
            background-color: #40c3ff;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="aside-left">左侧</div>
    <div class="middle">中间</div>
    <div class="aside-right">右侧</div>
</div>
</body>
</html>