<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:;

            padding:;

            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:;

                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:;

                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:;

                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;

            }

inline-block 左边固定，右边自适应的更多相关文章

  1. HTML布局之左右结构，左边固定右边跟据父元素自适应

    HTML布局之左右结构,左边固定右边跟据父元素自适应,兼容IE6+.Firefox.Chrome.Opera.Safari,这里是用表单写的一个demo,其实就在主体布局中也是可以的,比如像后台一些管 ...

  2. flex左右布局 左边固定 右侧自适应

    flex左右布局 左边固定 右侧自适应 想要保证自适应内容不超出容器怎么办. 通过为自适应的一侧设置width: 0;或者overflow: hidden;解决. 首先实现标题的布局,也很简单: &l ...

  3. css-两个div并排，左边宽度固定右边自适应的布局 的实现方法

    <div class= "container"> <div class="left"></div> <div clas ...

  4. css布局：左边固定宽度，右边自适应宽度或右侧固定，左侧自适应三种方法

    方法一:浮动布局 这种方法我采用的是左边浮动,右边加上一个margin-left值,让他实现左边固定,右边自适应的布局效果 HTML Markup <div id="left" ...

  5. css 关于两栏布局，左边固定，右边自适应

    好几个星期都没写博客了,最近不忙也不闲,稀里糊涂过了两个星期,之前几个月内天天坚持签到.最近也没签到.哈哈,说正事. 今天做东钿互金平台后台页面,昨天做了一个登录页面,业偶碰到了一个难题.等下也要把它 ...

  6. 实现一个div，左边固定div宽度200px，右边div自适应

    实现一个div,左边固定div宽度200px,右边div自适应<div class= "container"> <div class="left&quo ...

  7. 再探display:table-cell &&左边固定、右边自适应

    display:table-cell;这个属性用的不多,它和td差不多,但是如果可以用好还是能收益不少的,下面举例说明. 1. 父元素display:table-cell,并设置verticle-al ...

  8. css布局：左边固定宽度，右边自适应；右边固定宽度，左边自适应

    左边固定宽度,右边自适应 浮动布局的方法 <section class="container homeSection" id="mainSection"& ...

  9. css实现左边定宽右边自适应的5种方法总汇

    在网页布局中,通常需要实现左边定宽右边自适应布局,默认html的结构如下: <div class="box"> <div class="left&quo ...

  10. 如何用CSS实现左侧宽度固定，右侧自适应（两栏布局）？左右固定中间自适应（三栏布局）呢？

    在前端日常布局中,会经常遇到左侧宽度固定,右侧自适应或者左右两边固定,中间部分自适应的实用场景.本文例子中将列举出两种常用的两栏布局,左侧固定右侧自适应的常用方法以及代码和五种左右固定中间自适应的常用 ...

随机推荐

  1. hdu5269 Chip Factory

    地址:http://acm.split.hdu.edu.cn/showproblem.php?pid=5536 题目: Chip Factory Time Limit: 18000/9000 MS ( ...

  2. [No00003F]richtextbox实现拖放

    namespace WindowsFormsApplication1 { public partial class Form1 : Form { public Form1() { Initialize ...

  3. http协议（三）几种数据传输方式

    说说http协议的一些特点: 1)无状态 http协议是一种自身不对请求和响应之间的通信状态进行保存的协议,即无状态协议. 这种设置的好处是:更快的处理更多的请求事务,确保协议的可伸缩性 不过随着we ...

  4. Java多态:upcast和downcast

    upcast例: public class Test { public static void main(String[] args) { Cup aCup = new BrokenCup(); aC ...

  5. 个人PHP开发环境的选择与搭建

    入职一个多月,重新调整了一下自己电脑的开发环境,现在写出来,算是作为自己的笔记. 如果你是该文章的读者,请忍受文章内的所有小章节都没有具体的步骤. 因为平时还要打游戏(划掉),所以电脑系统一直是Win ...

  6. SQL server 专业词汇

    sql组成:DDL:数据库模式定义语言,关键字:createDML:数据操纵语言,关键字:Insert.delete.updateDCL:数据库控制语言 ,关键字:grant.removeDQL:数据 ...

  7. codevs 1281 Xn数列

    题目描述 Description 给你6个数,m, a, c, x0, n, g Xn+1 = ( aXn + c ) mod m,求Xn m, a, c, x0, n, g<=10^18 输入 ...

  8. Firefox使用svg blur滤镜渲染图片

    很久没来更新博客了,今天正好比较闲,就写一篇手头项目上遇到的一个css问题: .mature .blur { -webkit-filter:blur(25px); -moz-filter:blur(2 ...

  9. CGI、FastCGI和PHP-FPM关系图解

    CGI.FastCGI和PHP-FPM关系图解   webapp即是php解析器等 当Web Server收到 index.php 这个请求后,会启动对应的 CGI 程序,这里就是PHP的解析器.接下 ...

  10. iOS关于TableViewController和CollectionViewController中self.view心得记录

    之前写代码,不喜欢记录,导致很多做过的功能,时间久了都遗忘了. 以后要勤记录~~~ 一丶首先说一下TableViewController 大家都知道,如果直接创建一个继承于TableViewContr ...