CSS实现左中右布局的方法有哪些，代码是什么

发布时间：2023-09-23 14:47:13 所属栏目：语言来源：

导读：<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport"

content="width=device-width, user-scalable=no, initial-scale=1.0, maxi

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        html *{

            margin: 0;

            padding: 0;

        }

        article{

            height: 100px;

        }

        section{

            margin-top: 10px;

        }

        .left{

            width: 300px;

            height: 100px;

            background-color: #823384;

            text-align: center;

            font-size: 20px;

            color: #fdf6e3;

        }

        .center{

            height: 100px;

            background-color: #d29922;

        }

        .right{

            width: 300px;

            height: 100px;

            background-color: #0c8ac5;

            text-align: center;

            font-size: 20px;

            color: #fdf6e3;

        }

    </style>

</head>

<body>





<section class="layout float">

    <style>

        .float article div{

        }

        .float article .left{

            float: left;

        }

        .float article .right{

            float: right;

        }

        .float article .center{

        }

    </style>

    <article class="left-right-center">

        <div class="left">左边</div>

        <div class="right">右边</div>

        <div class="center"><h1>

            浮动float布局:

        </h1> 左元素: float: left; 右元素: float: right; 中间元素:自动填充</div>

    </article>

</section>



<section class="layout absolute">

    <style>

        article{

            position: relative;

        }

        .absolute .left-center-right div{

            position: absolute;

        }

        .absolute .left-center-right .left{

            left: 0;

        }

        .absolute .left-center-right .center{

            left: 300px;

            right: 300px;

        }

        .absolute .left-center-right .right{

            right: 0;

        }

    </style>

    <article class="left-center-right">

        <div class="left">左边</div>

        <div class="center"><h1>

            绝对absolute定位布局:

        </h1> 左边元素: position: absolute; left: 0;

            右边元素: position: absolute; right:0; 中间元素: position: absolute;left:300px; right: 300px;

        </div>

        <div class="right">右边</div>

    </article>

</section>



<section class="layout flexbox">

    <style>

        .flexbox .left-center-right{

            display: flex;

        }

        .flexbox .left-center-right .left{

        }

        .flexbox .left-center-right .center{

            flex:1;

        }

        .flexbox .left-center-right .right{

        }

    </style>

    <article class="left-center-right">

        <div class="left">左边</div>

        <div class="center"><h1>

            flex布局:

        </h1> 父元素display:flex; 左右子元素设置宽度300px; 中间子元素设置flex:1;</div>

        <div class="right">右边</div>

    </article>

</section>



<section class="table-box layout">

    <style>

        .table-box .left-center-right{

            width: 100%;

            display: table;

        }

        .table-box .left-center-right>div{

            display: table-cell;

        }

        .table-box .left-center-right .left{

        }

        .table-box .left-center-right .center{

        }

        .table-box .left-center-right .right {

        }

    </style>

    <article class="left-center-right">

        <div class="left">左边</div>

        <div class="center"><h1>

            表格table布局:

        </h1> 父元素width: 100%; display: table;

            左右子元素display: table-cell; width: 300px; </div>

        <div class="right">右边</div>

    </article>

</section>



<section class="grid layout">

    <style>

        .grid article{

            display: grid;

            width: 100%;

            grid-template-rows: 100px;

            grid-template-columns: 300px auto 300px;

        }

    </style>

    <article class="left-center-right">

        <div class="left">左边</div>

        <div class="center"><h1>

            网格grid布局:

        </h1> 父元素宽度为100%,

            父元素width: 100%; display:grid; grid-template-rows: 100; grid-template-columns: 300px auto 300px</div>

        <div class="right">右边</div>

    </article>

</section>

</body>

</html>

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!