CSS三栏布局的几种自适应的排版方式-Toy模板网

这篇具有很好参考价值的文章主要介绍了CSS三栏布局的几种自适应的排版方式。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

CSS三栏布局的几种方式，主要有 float、position、flex实现。

对红色、蓝色 box 设置 float，绿色不设。

<style>
        * {
            margin: 0;
            padding: 0;
        }

        .left {
            width: 200px;
            height: 300px;
            background-color: red;
            float:left;
        }

        .right {
            width: 200px;
            height: 300px;
            background-color: blue;
            float:right
        }

        .center {
            width: 200px;
            height: 300px;
            background-color: green;
        }

</style>


<body>
    <div class="father">
       <div class="left"></div>
       <div class="center"></div>
        <div class="right"></div>
        
    </div>
</body>

可见，结果绿色box好像消失了，其实是由于没有设置 float的情况下，它依然保持块级元素的属性。因此蓝色box在绿色box的元素下排列。

CSS三栏布局的几种自适应的排版方式,css,前端

把绿色块元素移到最后，给它配置 margin 0 200px

CSS三栏布局的几种自适应的排版方式,css,前端

可见绿色box刚好自动填充在红、蓝box之间。浏览器缩放时，也是3个box互相紧挨的效果。

CSS三栏布局的几种自适应的排版方式,css,前端

position实现

<style>
        * {
            margin: 0;
            padding: 0;
        }

        .left {
            width: 200px;
            height: 300px;
            background-color: red;
            /* float:left; */
            position:absolute;
            left:0;
        }

        .right {
            width: 200px;
            height: 300px;
            background-color: blue;
            /* float:right */
            position:absolute;
            right:0;
        }

        .center {
            /* width: 200px; */
            height: 300px;
            background-color: green;
            margin: 0 200px;
        }

</style>

<body>
    <div class="father">
       <div class="left"></div>
       <div class="right"></div>
       <div class="center"></div>
    </div>
</body>

对红、蓝box设置绝对定位的方式固定位置

CSS三栏布局的几种自适应的排版方式,css,前端

flex实现（最方便的一种）

 <style>
        * {
            margin: 0;
            padding: 0;
        }

        .left {
            width: 200px;
            height: 300px;
            background-color: red;
            /* float:left; */
            /* position:absolute;
            /* left:0; */
        } 

        .right {
            width: 200px;
            height: 300px;
            background-color: blue;
            /* float:right */
            /* position:absolute;
            right:0;
           */
        }

        .center {
            /* width: 200px; */
            height: 300px;
            background-color: green;
            /* margin: 0 200px; */
        }

        .father{
            display:flex;
        }

    
</style>


<body>
    <div class="father">
       <div class="left"></div>
       <div class="center"></div>
       <div class="right"></div>
    </div>
</body>