用弹性布局flex:

给父盒子加个display:flex; 给中间盒子设flex=1;

   /* 弹性盒子布局*/
        .wrap{
            width: 100%;
            height: 90px;
            display: flex;
        }
        .left{
            width: 300px;
            height: 90px;
            background-color: red;
            float: left;
        }
        .content{
            flex:1;
            height: 90px;
            background-color: yellow;
        }
        .right{
            width: 300px;
            height: 90px;
            background-color:blue;
            float: right;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="left"></div>
    <div class="content"></div>
    <div class="right"></div>
</div>

三栏布局，div左右盒子是定宽，中间是自适应的更多相关文章

  1. NEC学习 ---- 布局 -两列， 右侧定宽，左侧自适应

    该篇必须引用初始化样式和功能性样式,样式在前篇 http://www.cnblogs.com/Zell-Dinch/p/4436054.html 中已经提及. 上篇中介绍了左侧定宽,右侧自适应的布局, ...

  2. NEC学习 ---- 布局 -两列， 左侧定宽，右侧自适应

    CSS代码:以下两处代码是NEC中CSS初始化样式和功能性样式.今后的NEC研究中,默认这两处是引用的. /* 这是CSS reset 代码 --- 初始化样式 */ /* reset */ html ...

  3. css高度已知，左右定宽，中间自适应三栏布局

    css高度已知,左右定宽,中间自适应三栏布局: <!DOCTYPE html> <html lang="en"> <head> <meta ...

  4. 如何用CSS实现中间自适应，两边定宽三栏布局

    1.前言 用css实现“两边定宽,中间自适应的三栏布局”这个问题应该是在前端面试中被面试官提问到的高频问题了,一般当面试者写出一种实现方法之后,面试官还会问你还有没有别的方法,尽量多的写出几种实现方法 ...

  5. css实现三栏布局，两边定宽，中间自适应

    1.利用定位实现 css代码如下: .box{overflow: hidden;height: 100px;margin: 10px 0;} .box>div{height: 100%;} #b ...

  6. CSS布局 - 三栏布局

    CSS布局技术可谓是前端技术中最基础的技术,就是因为基础,所以我认为要更加熟练,深入的去掌握,去梳理. 一. 传统 ---> 浮动实现的三栏布局 采用浮动实现的三栏布局有以下特点及注意事项: · ...

  7. CSS三栏布局

    一.绝对定位 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...

  8. 布局：高度已知，布局一个三栏布局，左栏和右栏宽度为200px，中间自适应

    需求:高度已知为200px,写出三栏布局,左栏和右栏各位200px,中间自适应,如下图所示: 方法一:float浮动布局 原理是:定义三个区块,需要注意的是中间的区块放在右边区块的下面,统一设置高度为 ...

  9. ccs之经典布局（二）（两栏，三栏布局）

    接上篇ccs之经典布局(一)(水平垂直居中) 四.两列布局 单列宽度固定,另一列宽度是自适应. 1.float+overflow:auto; 固定端用float进行浮动,自适应的用overflow:a ...

随机推荐

  1. js实现深拷贝和浅拷贝

    浅拷贝: 思路----------把父对象的属性,全部拷贝给子对象,实现继承. 问题---------如果父对象的属性等于数组或另一个对象,那么实际上,子对象获得的只是一个内存地址,不会开辟新栈,不是 ...

  2. JS使用循环按指定倍数分割数组组成新的数组的方法

    今天一个新人同事问了我一个问题,就是有一个像下边这种不知道具体长度的数组,想以每4个为一组,重新组合为一个二维数组,很简单的需求只需要用到一个循环再去取余数就可以了,写了一个小demo在这里把代码包括 ...

  3. Spring注解依赖注入的三种方式的优缺点以及优先选择

    当我们在使用依赖注入的时候,通常有三种方式: 1.通过构造器来注入: 2.通过setter方法来注入: 3.通过filed变量来注入: 那么他们有什么区别吗?应该选择哪种方式更好? 三种方式的区别小结 ...

  4. spring cloud-zuul的Filter详解

    在前面我们使用zuul搭建了网关http://blog.csdn.net/liuchuanhong1/article/details/59056278 关于网关的作用,这里就不再次赘述了,我们今天的重 ...

  5. 算法-java代码实现堆排序

    堆排序 第7节 堆排序练习题 对于一个int数组,请编写一个堆排序算法,对数组元素排序. 给定一个int数组A及数组的大小n,请返回排序后的数组. 测试样例: [1,2,3,5,2,3],6 [1,2 ...

  6. thinkphp无法加载控制器:Admin

    在使用thinkphp时,通过某入口文件访问其他非默认的模块(比如Admin模块),出现报错: 无法加载控制器:Admin 原因:入口文件(比如index.php)中定义了绑定某个具体的模块 如:de ...

  7. Python3基础知识

    1.查看关键字 Python3查看关键字要先导入模块keyword,然后运用keyword的属性kwlist获取 >>> import keyword>>> key ...

  8. SpringMVC的filter怎么使用Autowired依赖注入bean

      有的时候根据我们业务的需要,我们需要在web项目中定义一个自己的filter,并想在这个filter中使用@Autowired注入bean供我们使用.如果直接使用的话是不行的,需要我们在xml文件 ...

  9. Java与C／C++的区别

        首先应该清楚,Java是由C++发展而来的,它保留了c++的大部分内容,类似于c++,但句法更清晰,规模更小,更易学.它是在对多种程序设计语言进行了深入细致研究的基础上,据弃了其他语言的不足之 ...

  10. Hibernate （四）

    1 懒加载 (感觉用处不是很大) 需要的时候加载,不需要的时候就不加载. 1.1 环境的搭建 hibernate.cfg.xml <?xml version='1.0' encoding='ut ...