左侧内容固定，右侧自动占满屏幕布局是开发中常见的布局，通常可见于一些管理后台：左侧展示菜单栏，右侧展示管理内容。
今天整理了7种实现这种布局的方法：

一：float+bfc ，左侧宽度不需要固定，但父级容器宽度需大于左侧宽度，否则右侧被挤压无法展示

 /*左浮动固定宽度，右边盒子overflow:hidden触发bfc，使其不与浮动盒子区域重叠，因此会重新计算宽度。*/
        .container1 .left{
            float: left;
            width: 100px;
        }
        .container1 .right {
            overflow: hidden;
        }
        /*清除浮动*/
        .container1:after{
            content: "";
            height: 0;
            line-height: 0;
            display: block;
            visibility: hidden;
            clear: both;
        }

二：float+margin-left，左侧宽度需固定

 /*左浮动固定宽度,右边margin-left*/
        .container2 .left{
            float: left;
            width: 100px;
        }
        .container2 .right{
            margin-left: 100px;
        }
        /*清除浮动*/
        .container2:after{
            content: "";
            height: 0;
            line-height: 0;
            display: block;
            visibility: hidden;
            clear: both;
        }

三：absolute+margin-left，左侧宽度需固定并且绝对定位，缺点：当左侧高于右侧时，左侧会超出父元素，需要使用js补救

        .container3 {
            position: relative;
        }
        .container3 .left{
            position: absolute;
            left: 10px;
            top: 10px;
            width: 100px;
        }
        .container3 .right{
            margin-left: 100px;
        }

四：子元素inline-block + calc动态计算宽度，左侧宽度需固定，父元素需要设置font-size:0清除默认间距，子元素设置vertical-align：top使其顶部对齐，右侧设置 width: calc(100% - 140px);达到自适应

/*双display:inline-block*/
        .container4{
           font-size: 0;
        }
        .container4 .left{
            width: 100px;
        }
        .container4 .left,.container4 .right{
            display: inline-block;
            font-size: 16px;
            vertical-align: top;
        }
        .container4 .right{
            width: calc(100% - 100px);
        }

五：table-cell，表格布局

        .container5{
            display: table;
        }
        .container5 .left,.container5 .right{
            display: table-cell;
        }

六：：flex，最便捷的方法，flex-grow可自由伸张，缺点：低版本IE不支持

    .container6{
        display: flex;
    }
    .container6 .right{
        flex-grow: 1;
    }

七：grid，网格布局

        .container7{
            display: grid;
        }
        .container7 .left{
            grid-column:1;
        }
        .container7 .right{
            grid-column:2;
        }

效果如下：

 
 
13079544-56539cb668b3fc8c.gif
 

示例完整代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .container{
            padding: 10px;
            border: 1px solid #ffa200;
            margin-bottom: 40px;
        }
        .container .left{
            background-color: #4b83e2;
        }
        .container .right {
            background-color: #ff3b30;
        }
        /*左浮动固定宽度，右边盒子overflow:hidden触发bfc，使其不与浮动盒子区域重叠，因此会重新计算宽度。*/
        .container1 .left{
            float: left;
            width: 100px;
        }
        .container1 .right {
            overflow: hidden;
        }
        /*清除浮动*/
        .container1:after{
            content: "";
            height: 0;
            line-height: 0;
            display: block;
            visibility: hidden;
            clear: both;
        }
        /*左浮动固定宽度,右边margin-left*/
        .container2 .left{
            float: left;
            width: 100px;
        }
        .container2 .right{
            margin-left: 100px;
        }
        /*清除浮动*/
        .container2:after{
            content: "";
            height: 0;
            line-height: 0;
            display: block;
            visibility: hidden;
            clear: both;
        }
        /*左边绝对定位，右边设置margin-left，缺点：当左边高于右边时，左边会超出父元素，需要使用js补救。*/
        .container3 {
            position: relative;
        }
        .container3 .left{
            position: absolute;
            left: 10px;
            top: 10px;
            width: 100px;
        }
        .container3 .right{
            margin-left: 100px;
        }
        /*双display:inline-block*/
        .container4{
            font-size: 0;
        }
        .container4 .left{
            width: 100px;
        }
        .container4 .left,.container4 .right{
            display: inline-block;
            font-size: 16px;
            vertical-align: top;
        }
        .container4 .right{
            width: calc(100% - 100px);
        }
        /*table*/
        .container5{
            display: table;
        }
        .container5 .left,.container5 .right{
            display: table-cell;
        }
        /*flex*/
        .container6{
            display: flex;
        }
        .container6 .right{
            flex-grow: 1;
        }
        /*grid*/
        .container7{
            display: grid;
        }
        .container7 .left{
            grid-column:1;
        }
        .container7 .right{
            grid-column:2;
        }
    </style>
</head>
<body>
<div class="container container1">
    <div class="left">左边左边左边左边左边左边左边左边左边左边</div>
    <div class="right">右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边</div>
</div>
<div class="container container2">
    <div class="left">左边左边左边左边左边左边左边左边左边左边</div>
    <div class="right">右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边</div>
</div>
<div class="container container3">
    <div class="left">左边左边左边左边左边左边左边左边左边左边</div>
    <div class="right">右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边</div>
</div>
<div class="container container4">
    <div class="left">左边左边左边左边左边左边左边左边左边左边</div>
    <div class="right">右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边</div>
</div>
<div class="container container5">
    <div class="left">左边左边左边左边左边左边左边左边左边左边</div>
    <div class="right">右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边</div>
</div>
<div class="container container6">
    <div class="left">左边左边左边左边左边左边左边左边左边左边</div>
    <div class="right">右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边</div>
</div>
<div class="container container7">
    <div class="left">左边左边左边左边左边左边左边左边左边左边</div>
    <div class="right">右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边</div>
</div>
</body>
</html>

原文作者技术博客：https://www.jianshu.com/u/ac4daaeecdfe
95后前端妹子一枚，爱阅读，爱交友，将工作中遇到的问题记录在这里，希望给每一个看到的你能带来一点帮助。
欢迎留言交流。

Logo
向您推荐>>Eolink开发者社区

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

更多推荐

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

avatar 云原生

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

avatar 云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

avatar 云原生