css怎样实现三栏布局

实现办法：

一、float浮动

<section class='layout float'>
         <style>
             .layout.float .left-right-center{
                 height: 100px;
             }
             .layout.float .left{
                 float: left;
                 width: 300px;
                 background-color: red;
             }

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

             .layout.float .center{
                 background-color: yellow;
             }
         </style>
         <article class="left-right-center">
             <div class="left"></div>
             <div class="right"></div>
             <div class="center">我是中心的自顺应元素--浮动</div>
         </article>
     </section>

道理：摆布两个div由于浮动离开了文档流，center就会上移，造成三栏规划的结果（前提是高度雷同）

长处：兼容性高

缺陷：需要清除浮动来防止影响其他元素

假如高度不牢固，中心的内容会被撑开，摆布两边不会一起撑开

（引荐教程：CSS教程）

二、绝对定位

<section class="layout absolute">
         <style>
             .layout.absolute .left-center-right div{
                 position: absolute;
                 height: 100px;
             }

             .layout.absolute .left{
                 left: 0;
                 width: 300px;
                 background-color: red;
             }

             .layout.absolute .center{
                 left: 300px;
                 right: 300px;
                 background-color: yellow;
             }

             .layout.absolute .right{
                 right: 0;
                 width: 300px;
                 background-color: blue;
             }
         </style>
         <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                我是中心的自顺应元素--绝对定位
            </div>
            <div class="right"></div>
         </article>
     </section>

道理：利用绝对定位乃至宽度，将摆布两边的div牢固住，中心div的宽度就会有自顺应的结果

长处：快速

缺陷：假如父元素离开了文档流，子元素必然会离开文档流，使用的场景不多

假如中心元素的高度增添，两边元素的高度不会增添，所以只要中心的div会撑开

三、flex规划

<section class="layout flex">
         <style>
             .layout.flex .left-center-right{
                 display: flex;
                 height: 100px;
             }

             .layout.flex .left{
                 width: 300px;
                 background-color: red;
             }

             .layout.flex .center{
                 flex: 1;
                 background-color: yellow;
             }

             .layout.flex .right{
                 width: 300px;
                 background-color: blue;
             }
         </style>
         <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                我是中心的自顺应元素--flex规划
            </div>
            <div class="right"></div>
         </article>
     </section>

道理：将父元素设定为flex规划，然后中心元素设定flex为1，到达自顺应的结果

长处：在实际开发中常用

缺陷：IE8及以下的阅读器不支撑

假如高度不牢固，中心内容的高度撑开后，两边也会随之撑开

四、table规划

   <section class="layout table">
        <style>
            .layout.table .left-center-right{
                display: table;
                height: 100px;
                width: 100%;
            }

            .layout.table .left{
                display: table-cell;
                width: 300px;
                background-color: red;
            }

            .layout.table .center{
                display: table-cell;
                background-color: yellow;
            }

            .layout.table .right{
                display: table-cell;
                width: 300px;
                background-color: blue;
            }
        </style>
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                我是中心的自顺应元素--table
            </div>
            <div class="right"></div>
        </article>
    </section>

道理：将父元素设定为table规划，然后每个子元素都是teble-cell，给摆布两个格子设定牢固的宽度，中心的格子就可以到达自顺应的结果

长处：兼容性好，可做flex规划在ie8以下的代替

缺陷：局限性

假如高度不牢固，中心被撑开时，摆布两边也会被撑开，和flex相似

五、网格规划

<section class="layout grid">
        <style>
            .layout.grid .left-center-right{
                display: grid;
                width: 100%;
                grid-template-rows: 100px;/*每一格都是100px高*/
                grid-template-columns: 300px auto 300px;/*摆布两格都是300px，中心是自顺应*/
            }
            
            .layout.grid .left{
                background-color: red;
            }

            .layout.grid .center{
                background-color: yellow;
            }

            .layout.grid .right{
                background-color: blue;
            }
        </style>
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                我是中心的自顺应元素--grid规划
            </div>
            <div class="right"></div>
        </article>
    </section>

道理：将父元素设定为网格规划，然后规定每格的高度乃至每格的宽度，只用离别给每格独自设定色彩即可

长处：技术比力新，利便

缺陷：兼容性不是很好

假如高度不牢固，中心元素增加文本，也不会撑开

相关视频教程引荐：css视频教程

以上就是css怎样实现三栏规划的具体内容，更多请关注百分百源码网其它相关文章！