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

时间：2017-11-12 11:01:45 阅读：158 评论：0 收藏：0 [点我收藏+]

标签：box div width col 表格一个 utf-8 you section

共有五种布局方式：

1.浮动布局

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>

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>

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>

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>

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"></div>
        </article>
    </section>
</body>

</html>

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

标签：box div width col 表格一个 utf-8 you section

原文地址：http://www.cnblogs.com/yingzi1028/p/7820504.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

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

1.浮动布局

2.绝对定位布局

3.flexbox布局

4.表格（table）布局

5.网格 （grid）布局

5.网格（grid）布局