经典三栏布局相关

最新推荐文章于 2022-08-01 18:45:02 发布

VincentLieie

最新推荐文章于 2022-08-01 18:45:02 发布

阅读量227

点赞数

分类专栏： H5/CSS3

本文链接：https://blog.csdn.net/Itistoolate/article/details/79791224

版权

H5/CSS3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

三栏布局(如果高度已知的话)

float解决方案

高度未知失效

    <section class="layout float">
        <article class="left-right-center">
            <style media="screen">
               .layout.float .left{
                  float: left;
                  width: 300px;
                  background: blue;
               }
               .layout.float .right{
                  float: right;
                  width: 300px;
                  background:blue;
               }
               .layout.float .center{
                  background:red;
               }       
            </style>
             <div class="left"></div>  
             <div class="right"></div>   
             <div class="center">
                 <h1>浮动解决方案</h1>
                 1.三栏
                 2.三栏
                 3.三滥
             </div>

        </article>
    </section>

绝对定位

高度未知失效

  <section class="layout absolute">
        <article class="left-center-right">
            <style media="screen">
                .layout.absolute .left-center-right>div{
                    position: absolute;

                }
                .layout.absolute .left{
                    left: 0;
                    width: 300px;
                    background: red;
                }
                .layout.absolute .center{
                    left: 300px;
                    right: 300px;
                    background: blue;
                }
                .layout.absolute .right{
                    right: 0;
                    width: 300px;
                    background: red;
                }
            </style>
             <div class="left"></div>  
             <div class="right"></div>   
             <div class="center">
                 <h1>绝对定位解决方案</h1>
                 1.三栏
                 2.三栏
                 3.三滥
             </div>

        </article>
    </section>

flexbox解决方案

  <section class="layout flex">
        <article class="left-center-right">
            <style media="screen">
                .layout.flex .left-center-right{
                  display: flex;
                }
                .layout.flex .left{
                    width: 300px;
                    background: red;
                }
                .layout.flex .right{
                    width: 300px;
                    background: red;
                }
                .layout.flex .center{
                    flex:1;
                    background: blue;
                }
            </style>
             <div class="left"></div>  

             <div class="center">
                 <h1>flex解决方案</h1>
                 1.三栏
                 2.三栏
                 3.三滥
             </div>
             <div class="right"></div>

        </article>
    </section>

表格布局

   <section class="layout table">
        <article class="left-center-right">
            <style media="screen">
              .layout.table  .left-center-right{
                  width: 100%;
                  display: table;
                  height: 100px;
              } 
              .layout.table .left-center-right>div{
                display: table-cell;
              }
              .layout.table .left{
                 width: 300px;
                 background: red;
              }
              .layout.table .center{
                 background: blue;
              }
              .layout.table .right{
                 width: 300px;
                 background: red;
              }
            </style>
             <div class="left"></div>  

             <div class="center">
                 <h1>表哥解决方案</h1>
                 1.三栏
                 2.三栏
                 3.三滥
             </div>
             <div class="right"></div>

        </article>
    </section>

网格布局

高度未知失效

网格布局新出的,兼容性一般，

   <section class="layout grid">
        <article class="left-center-right">
            <style media="screen">
              .layout.grid  .left-center-right{
                display: grid;
                width: 100%;
                grid-template-rows: 100px;
                grid-template-columns: 300px auto 300px;
              }
              .layout.grid .left{
                  background: red;
              }
              .layout.grid .center{
                  background: blue;
              }
              .layout.grid .right{
                  background: red;
              }

            </style>
             <div class="left"></div>  

             <div class="center">
                 <h1>网格解决方案</h1>
                 1.三栏
                 2.三栏
                 3.三滥
             </div>
             <div class="right"></div>

        </article>
    </section>