内容代码如下:

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

第一种:

        .left {
            float: left;/*左浮动*/
            width: 200px;
            height: 100px;
            border: 10px solid green;
        }

        .right {
            overflow: hidden;
            height: 100px;
            border: 10px solid gold;
            word-break: break-all; /*强制让内容换行*/
        }

第二种:

        .container{
            overflow: hidden;/* 清浮动*/
        }
        .left {
            float: left;/*左浮动,脱离文档流*/
            width: 200px;
            height: 100px;
            border: 10px solid green;
        }
        .right {
            margin-left: 220px;/*左边的margin*/
            height: 100px;
            border: 10px solid gold;
            word-break: break-all; /*强制让内容换行*/
        }

第三种:

        .left {
            position: absolute;/*左绝对定位,脱离文档流*/
            width: 200px;
            height: 100px;
            border: 10px solid green;
        }

        .right {
            margin-left: 220px;/*左边的margin*/
            height: 100px;
            border: 10px solid gold;
            word-break: break-all; /*强制让内容换行*/
        }

第四种:(弹性盒子)

        .container{
            display: flex;/*容器内的内容自动横向排列*/
        }
        .left {
            width: 200px;
            height: 100px;
            border: 10px solid green;
        }

        .right {
            flex: 1;/*剩余的部分默认填满*/
            height: 100px;
            border: 10px solid gold;
            word-break: break-all; /*强制让内容换行*/
        }

第五种:(网格布局)

                .container{
                    display: grid; 
                    grid-template-columns: 200px auto;
                    /* grid-template-columns: 200px 1fr; 这个也可以*/
                    grid-template-rows:100px;
                }
                .left {
                    border: 10px solid green;
                }

                .right {
                    border: 10px solid gold;
                    word-break: break-all;
                    overflow: hidden;
                }

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐