02 两栏布局之定宽+自适应

最新推荐文章于 2024-08-10 21:02:05 发布

海纳百川程序员

最新推荐文章于 2024-08-10 21:02:05 发布

阅读量50

点赞数

分类专栏： Html 文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/qq_42574478/article/details/133907090

版权

Html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

推荐flex

 /* 两栏布局之定宽+自适应：flex布局 */
        .container{
            height: 250px;
            position: relative;
            display: flex;
        }
        .left{
            background-color: red;
            width: 300px;         
        }
       
        .right{
            background-color: green;       
            flex: 1;    
        }

 <div class="container">
        <div class="left">left</div>
        <div class="right">
            right
        </div>
    </div>

/* 两栏布局之定宽+自适应：table布局 */
        .container{
            height: 200px;
            display: table;
            width: 100%;
        }
        .left{
            background-color: red;
            width: 250px;
            display: table-cell;
        }
        .right{
            background-color: green;
            display: table-cell;
        }

 <div class="container">
        <div class="left">left</div>
        <div class="right">
            right
        </div>
    </div>

/* 两栏布局之定宽+自适应：float+margin */
        .container{
            height: 250px;
        }
        .left{
            background-color: red;
            width: 300px;
            float:left;
        }
        .right{
            background-color: green;
            margin-left: 300px;
        }
<div class="container">
        <div class="left">left</div>
        <div class="right">right</div>
    </div>

/* 两栏布局之定宽+自适应：float+bfc */
        .container{
            height: 250px;
        }
        .left{
            background-color: red;
            width: 300px;
            float:left;
        }
        .right{
            background-color: green;
            overflow: hidden;
        }
<div class="container">
        <div class="left">left</div>
        <div class="right">right</div>
    </div>

/* 两栏布局之定宽+自适应：position+margin */
        .container{
            height: 250px;
            position: relative;
        }
        .left{
            background-color: red;
            width: 300px;
            position: absolute;
            
        }
        /* .right{
            background-color: green;
            margin-left: 300px;
        } */
        /* 或者 */
        .right{
            background-color: green;
            position: absolute;
            left: 300px;
            right: 0;
        }

<div class="container">
        <div class="left">left</div>
        <div class="right">right</div>
    </div>

/* 两栏布局之定宽+自适应：float+负margin */
        .container{
            height: 250px;
        }
        .left{
            background-color: red;
            width: 300px;
            float: left;
            margin-right: -100%;
        }
        .right{
            /* background-color: green; */
            float: left;
            width: 100%;
        }
        .content{
            background-color: blue;
            margin-left: 300px;
        }
 <div class="container">
        <div class="left">left</div>
        <div class="right">
            <div class="content">
                content
            </div>
        </div>
    </div>