三栏布局（两边定宽中间自适应）的几种方法

最新推荐文章于 2022-04-15 20:45:13 发布

编程好难我不会

最新推荐文章于 2022-04-15 20:45:13 发布

阅读量205

点赞数 1

分类专栏： Css 文章标签： css html5

本文链接：https://blog.csdn.net/simyululi/article/details/119111282

版权

Css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

三栏布局

第一种方式只用float

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .outer{
        min-width: 600px;
        width: 100%;
    }
    .side{
        width: 300px;
        background-color: orange;
        height: 100vh;
    }
    .left{
        float:left;

    }
    .right{
        float: right;
    }
    .mid{
        float: left;
        width: calc(100% - 600px);
        background-color: lightblue;
        height: 100vh;
    }

</style>
<body>
    <div class="outer">
        <div class="side left"></div>
        <div class="mid"></div>
        <div class="side right"></div>
    </div>
</body>

第二种方式使用position

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .outer{
        position:relative;

    }
    .inner{
        position: absolute;
        background-color: orange;
        height: 100vh;
    }
    .left{
        left: 0;
        width:300px;
    }
    .right{
        right:0;
        width:300px;
    }
    .mid{
        left: 300px;
        width: calc(100% - 600px);
        background-color: lightblue;
        height: 100vh;
    }

</style>
<body>
<div class="outer">
    <div class="inner left"></div>
    <div class="inner mid"></div>
    <div class="inner right"></div>
</div>
</body>

第三种方式使用flex

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .outer{
        display: flex;
    }
    .inner{
        width: 300px;
        height: 100vh;
        background-color: orange;
    }
    .mid{
        flex: 1;
        background-color: lightblue;
    }

</style>
<body>
<!--float-->
<div class="outer">
    <div class="inner left"></div>
    <div class="inner mid"></div>
    <div class="inner right"></div>
</div>
</body>

第四种方式使用table

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .outer{
        /*table布局会自动缩放当前的宽高*/
        display: table;
        height: 100vh;
    }
    .inner{
        width: 300px;
        height: 100%;
        background-color: orange;
    }
    .mid{
        display: table-cell;
        width: 100%;
        background-color: lightblue;
    }
</style>
<body>
<div class="outer">
    <div class="inner left"></div>
    <div class="inner mid"></div>
    <div class="inner right"></div>
</div>
</body>

第五种方式使用grid布局

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .outer{
        display: grid;
        width: 100%;
        height: 100vh;
        grid-template-columns: 300px auto 300px;
        grid-template-rows: 100%;
    }
    .inner{
        background-color: orange;
    }
    .mid{
        background-color: lightblue;
    }

</style>
<body>

<div class="outer">
    <div class="inner left"></div>
    <div class="inner mid"></div>
    <div class="inner right"></div>
</div>
</body>

第六种方式是圣杯/双飞翼布局，这种方式的兼容性最好

<style>
    *{
        margin: 0;
        padding: 0;
    }
    html,body,.container{
        height: 100%;
        margin: 0;
    }
    .container{
        background-color: #333;
        /*padding:0px 200px 0 150px;*/
        /*box-sizing: border-box;*/
        margin: 0 200px 0 150px;
    }
    .column{
        position: relative;
        float: left;
        height: 100%;
    }
    .middle{
        width: 100%;
        background-color: lightblue;
    }
    .left{
        width:150px;
        left: -150px;
        margin-left: -100%;
        background-color: orange;
    }
    .right{
        width: 200px;
        /*right: -200px;*/
        margin-right: -200px;
        background-color: indianred;
    }
</style>
<body>
<div class="container">
    <div class="column middle"></div>
    <div class="column left"></div>
    <div class="column right"></div>
</div>
</body>

以上几种方式同时也可以用作两栏布局，但是两栏布局还有一种方式可以做，就是左边栏float:left的同时对右边栏开启BFC。代码如下。

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .outer{
        min-width: 600px;

        width: 100%;
    }
    .side{
        width: 300px;
        background-color: orange;
        height: 100vh;
    }
    .left{
        float:left;

    }
    .mid{
        display: inline-block;
        width: calc(100% - 300px);
        background-color: lightblue;
        height: 100vh;
    }

</style>
<body>
    <div class="outer">
        <div class="side left"></div>
        <div class="mid"></div>
    </div>
</body>