两边宽度已知，如何让中间自适应

Posted 爱喝酸奶的吃货

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了两边宽度已知，如何让中间自适应相关的知识，希望对你有一定的参考价值。

共有五种布局方式：

1.浮动布局

2.绝对定位布局

3.flexbox布局

4.表格（table）布局

5.网格 （grid）布局

1.浮动布局

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>页面布局/两边宽度已知，如何让中间自适应</title>
    <style type="text/css">
    html * {
        padding: 0;
        margin: 0;
    }

    .layout {
        margin-top: 20px;
    }

    .layout div {
        min-height: 100px;
    }

    .layout .left,
    .layout .right {
        width: 300px;
    }

    .layout .left {
        background: pink;
    }

    .layout .right {
        background: orange;
    }

    .layout .center {
        background: #3FE5F0;
    }
    </style>
</head>

<body>
    <!-- 浮动布局 -->
    <section class="layout float">
        <style type="text/css" media="screen">
        .layout.float .left {
            float: left;
        }

        .layout.float .right {
            float: right;
        }
        </style>
        <article class="left-right-center">
            <div class="left"></div>
            <div class="right"></div>
            <div class="center">
                <h1>浮动解决方案</h1> 1.这是一个三栏浮动布局的中间部分 2.这是一个三栏浮动布局的中间部分 3.这是一个三栏浮动布局的中间部分
            </div>
        </article>
    </section>
</body>

</html>

缺点：float，是脱离文档流的，如果处理不好，会遇到很多问题。

优点：兼容性比较好。

2.绝对定位布局

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>页面布局/两边宽度已知，如何让中间自适应</title>
    <style type="text/css">
    html * {
        padding: 0;
        margin: 0;
    }

    .layout {
        margin-top: 20px;
    }

    .layout div {
        min-height: 100px;
    }

    .layout .left,
    .layout .right {
        width: 300px;
    }

    .layout .left {
        background: pink;
    }

    .layout .right {
        background: orange;
    }

    .layout .center {
        background: #3FE5F0;
    }
    </style>
</head>

<body>
    <!-- 绝对定位解决方案 -->
    <section class="layout absolute">
        <style type="text/css" media="screen">
        .layout.absolute .left-center-right>div {
            position: absolute;
        }

        .layout.absolute .left {
            left: 0;
        }

        .layout.absolute .right {
            right: 0;
        }

        .layout.absolute .center {
            left: 300px;
            right: 300px;
        }
        </style>
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                <h1>绝对定位解决方案</h1> 1.这是一个三栏绝对定位布局中间部分 2.这是一个三栏绝对定位布局中间部分 3.这是一个三栏绝对定位布局中间部分
            </div>
            <div class="right"></div>
        </article>
    </section>
</body>

</html>

缺点：脱离文档流，下面所有的子元素也必须脱离文档流，所以可使用性比较差。

优点：快捷，如果配合js使用，非常快，也不容易出问题。

3.flexbox布局

flexbox布局教程：Flex 布局教程：语法篇  、Flex 布局教程：实例篇。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>页面布局/两边宽度已知，如何让中间自适应</title>
    <style type="text/css">
    html * {
        padding: 0;
        margin: 0;
    }

    .layout {
        margin-top: 20px;
    }

    .layout div {
        min-height: 100px;
    }

    .layout .left,
    .layout .right {
        width: 300px;
    }

    .layout .left {
        background: pink;
    }

    .layout .right {
        background: orange;
    }

    .layout .center {
        background: #3FE5F0;
    }
    </style>
</head>

<body>
    <!-- flexbox 解决方案 -->
    <section class="layout flexbox">
        <style type="text/css" media="screen">
        .layout.flexbox {
            margin-top: 20px;
        }

        .layout.flexbox .left-center-right {
            display: flex;
        }

        .layout.flexbox .left-center-right .center {
            flex: 1;
        }
        </style>
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                <h1>flexbox解决方案</h1> 1.这是一个三栏flexbox布局中间部分 2.这是一个三栏flexbox布局中间部分 3.这是一个三栏flexbox布局中间部分
            </div>
            <div class="right"></div>
        </article>
    </section>
</body>

</html>

注意：设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

缺点：有的浏览器版本不兼容。比如ie8.

优点：弥补了float和position: absolute的不足。

4.表格（table）布局

基于CSS属性display:table的表格布局的使用

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>页面布局/两边宽度已知，如何让中间自适应</title>
    <style type="text/css">
    html * {
        padding: 0;
        margin: 0;
    }

    .layout {
        margin-top: 20px;
    }

    .layout div {
        min-height: 100px;
    }

    .layout .left,
    .layout .right {
        width: 300px;
    }

    .layout .left {
        background: pink;
    }

    .layout .right {
        background: orange;
    }

    .layout .center {
        background: #3FE5F0;
    }
    </style>
</head>

<body>
    <!-- 表格解决方案 -->
    <section class="layout table">
        <style type="text/css" media="screen">
        .layout.table .left-center-right {
            width: 100%;
            display: table;
            height: 100px;
        }

        .layout.table .left-center-right>div {
            display: table-cell;
        }
        </style>
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                <h1>表格解决方案</h1> 1.这是一个三栏表格布局中间部分 2.这是一个三栏表格布局中间部分 3.这是一个三栏表格布局中间部分
            </div>
            <div class="right"></div>
        </article>
    </section>
</body>

</html>

缺点：三个部分，当其中一个单元格的高度超出时，俩测的单元格高度也要跟着调整高度。有时我们不需要同时增高的。

优点：兼容性比较好，可以兼容ie8。

5.网格 （grid）布局

CSS Grid布局指南 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>页面布局/两边宽度已知，如何让中间自适应</title>
    <style type="text/css">
    html * {
        padding: 0;
        margin: 0;
    }

    .layout {
        margin-top: 20px;
    }

    .layout div {
        min-height: 100px;
    }

    .layout .left,
    .layout .right {
        width: 300px;
    }

    .layout .left {
        background: pink;
    }

    .layout .right {
        background: orange;
    }

    .layout .center {
        background: #3FE5F0;
    }
    </style>
</head>

<body>
    <!-- 网格布局 -->
    <section class="layout grid">
        <style type="text/css" media="screen">
        .layout.grid .left-center-right {
            display: grid;
            width: 100%;
            grid-template-rows: 100px;
            /* 行高 */
            grid-template-columns: 300px auto 300px;
            /* 我们需要三列，左右两列各300px，中间自适应 */
        }
        </style>
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                <h1>网格布局解决方案</h1> 1.这是一个三栏网格布局中间部分 2.这是一个三栏网格布局中间部分 3.这是一个三栏网格布局中间部分
            </div>
            <div class="right"></css布局的几种方式


 实现三个div，固定左右两边的div宽为200，中间的div宽度自适应的四种方法


 css布局1：左右宽度固定中间自适应html布局解决方案（同一侧宽度固定，另一侧自适应）


 抛砖引玉之宽度自适应布局


 抛砖引玉之宽度自适应布局


 《web前端笔记30》css三栏布局、左右两栏宽度固定，中间自适应