美文网首页
双飞翼布局

双飞翼布局

作者: 星河光影 | 来源:发表于2019-03-19 20:24 被阅读0次

    双飞翼布局即三栏布局,左右两边宽度自适应,中间自适应且先加载
    <style>
    *{
    margin: 0;
    padding: 0;
    }
    div{
    float: left;
    }
    .container{
    width: 100%;
    }
    .center{
    width: 100%;
    height: 100px;
    background: lightcoral;
    margin-left: 200px;
    margin-right: 200px;
    }
    .left{
    width: 200px;
    height: 100px;
    background: lime;
    margin-left: -100%;
    }
    .right{
    width: 200px;
    height: 100px;
    background: lightseagreen;
    margin-left: -200px;
    }
    </style>

    <div class="container"><div class="center">中间</div></div>
    <div class="left">左边</div>
    <div class="right">右边</div>

    相关文章

      网友评论

          本文标题:双飞翼布局

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