美文网首页Web前端之路
如何实现“右边宽度固定,左边自适应”的布局

如何实现“右边宽度固定,左边自适应”的布局

作者: 春木橙云 | 来源:发表于2019-08-10 14:22 被阅读3次

    最近台风天,各位风口的看官老爷注意安全哈!

    方法一:

    <style>
    body{
        display: flex;
    }
    .left{
        background-color: rebeccapurple;
        height: 200px;
        flex: 1;
    }
    .right{
        background-color: red;
        height: 200px;
        width: 100px;
    }
    </style>
    <body>
        <div class="left"></div>
        <div class="right"></div>
    </body>
    

    方法二:

    <style>
        div {
            height: 200px;
        }
        .left {
            float: right;
            width: 200px;
            background-color: rebeccapurple;
        }
        .right {
            margin-right: 200px;
            background-color: red;
        }
    </style>
    <body>
        <div class="left"></div>
        <div class="right"></div>
    </body>
    
    

    相关文章

      网友评论

        本文标题:如何实现“右边宽度固定,左边自适应”的布局

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