inline-block 左边固定，右边自适应-白红宇

inline-block 左边固定，右边自适应

阅读量：6281 次

发布时间：2019-06-22

本文共 3855 字，大约阅读时间需要 12 分钟。

body,html,ul,li{
                margin: 0;            padding: 0;            list-style: none;        }            .left{                /*background: #00ABA1;*/                width: 33.33%;                max-width: 200px;                height: auto;                float: left;                padding: 20px;                margin: 10px;                font-family: "微软雅黑";                font-size: 18px;                color: white;                margin-right: 24px;            }            .left .logo{
                    width: 200px;                max-width: 200px;                height: 40px;                padding: 20px;                background: #027f78;                font-family: "微软雅黑";                font-weight: 600;                font-size: 26px;            }            .left .menu{
                    height: auto;            }            .menu li{
                    width: 200px;                max-width: 200px;                height: 30px;                text-align: center;                line-height: 30px;                font-family: "微软雅黑";                font-size: 18px;                background: #00ABA1;                padding: 20px;            }            .menu li:hover{
                    background: #03c6bb;                color: white;            }            .right{
                    background: #555555;                margin-top: 30px;                float: left;                width: 80%;                height: auto;            }            .right .close {
                    padding: 10px;                text-align: right;                color: white;                font-size: 18px;                font-weight: 600;                line-height: 30px;                height: 30px;                padding-right: 20px;                background: #333;            }            .right .link {
                    height: 24px;                background: f3f3f3;                font-size: 14px;                color: white;                padding: 4px;                padding-left: 10px;                vertical-align: middle;                line-height: 24px;            }            .link a{
                    color: white;                text-decoration: none;            }            .link a:link{
                    color: white;            }            .link a:visited{
                    color: white;            }            .link a:hover{
                    color: #00ABA1;            }            .link a:after{
                    content: '/';                color: white;                font-weight: 400;                margin-right: 2px;            }            /*取销最后一个标签的“/”*/            .link a:last-child::after{
                    content: '';            }            .mai{
                    background: #f3f3f3;                height: auto;            }            .box {                /*因为box是inline-block排列的，因此它们的居中按文字的方式来*/                text-align: center;                padding: 22px;            }            .box1,.box2,.box3,.box4{
                    width: 200px;                height: 200px;                display: inline-block;                margin: 50px;                border: 1px solid #00ABA1;            }