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

<body>
        <div class="col-md-4 left">
            <div class="logo">默沙东盲讲</div>
            <ul class="menu">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>                        
        </div>
        <div class="col-md-8 right">
            <div class="col-md-8 close">close</div>
            <div class="col-md-8 link">
                <a href="">路径菜单</a>
                <a href="">路径菜单</a>
                <a href="">路径菜单</a>
                <a href="">路径菜单</a>
                <a href="">路径菜单</a>
            </div>
            <div class="mai">
                <div class="box">
                    <div class="box1"></div>
                    <div class="box2"></div>
                    <div class="box3"></div>
                    <div class="box4"></div>
                </div>
            </div>
        </div>
    </body>
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;
            }

 

posted @ 2016-09-06 18:09  礼拜16  阅读(1988)  评论(0)  编辑  收藏  举报