美文网首页
双飞翼布局

双飞翼布局

作者: xiamihaozi | 来源:发表于2019-04-02 22:25 被阅读0次

    flex实现建议双飞翼布局,话不多说,开撸!!!

    html

    <body>
        <header>header</header>
        <div class="main">
            <div class="left">left</div>
            <div class="content">container</div>
            <div class="right">right</div>
        </div>
        <footer>footer</footer>
    </body>
    

    css

    *{
      margin:0;padding:0;border: none;
    }
    header,footer{
      height:50px;
      background: #ddd;
    }
    .main{
      display:flex;
    }
    .content{
      flex-grow:1;
      height:400px;
      background:gold;
    }
    .left,.right{
      width:100px;
      background: green;
    }
    

    相关文章

      网友评论

          本文标题:双飞翼布局

          本文链接:https://www.haomeiwen.com/subject/lgxobqtx.html