用弹性布局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. 2017广东工业大学程序设竞赛E题（倒水）

    Description 一天,CC买了N个容量可以认为是无限大的瓶子,开始时每个瓶子里有1升水.接着~~CC发现瓶子实在太多了,于是他决定保留不超过K个瓶子.每次他选择两个当前含水量相同的瓶子,把一个 ...

  2. Elasticsearch介绍，一些概念的笔记

    Elasticsearch,分布式,高性能,高可用,可伸缩的搜索和分析系统 什么是搜索? 如果用数据库做搜索会怎么样? 什么是全文检索和Lucene? 什么是Elasticsearch? Elasti ...

  3. Spring框架学习笔记（10）——Spring中的事务管理

    什么是事务 举例:A给B转500,两个动作,A的账户少500,B的账户多500 事务就是一系列的动作, 它们被当做一个单独的工作单元. 这些动作要么全部完成, 要么全部不起作用 一.注解添加事务管理方 ...

  4. [国嵌笔记][020][ARM家族大检阅]

    ARM芯片:2440(arm9) 6410(arm11) 210(cortex-A8) ARM核:arm9(arm-v4) arm11(arm-v6) cortex-A8(arm-v7) 指令架构:a ...

  5. JavaScript变量声明与提升

    一直以来对变量提升都是比较模糊的,今天特地看了一下这个知识点,总结一下. 1.举个最简单的例子来说一下什么是变量提升吧. function foo(){ console.log(x); // unde ...

  6. setTimeout()方法，你真的懂吗？

    今天在群里看到了一道经典的javascript题型,之前也遇到过,可是再次遇到时,还是做错,还是不理解,因此这里来做个笔记吧! 不说了,直接上代码吧 for(var i=1; i<=9; i++ ...

  7. Spark性能调优之合理设置并行度

    Spark性能调优之合理设置并行度 1.Spark的并行度指的是什么?     spark作业中,各个stage的task的数量,也就代表了spark作业在各个阶段stage的并行度!     当分配 ...

  8. vue 开发2017年变化回顾及2018年展望

    vue.js 变化 从 github 的发布记录我们可以看到2017年 vue.js 的第一个发布为 v2.1.9,最后一个为 v2.5.13,主要发布小版本 2.2~2.5.这些发布提升了vue 与 ...

  9. 一句话 Servlet

    Servlet是用来完成B/S架构下,客户端请求的响应处理. web.xml其实就是servlet的一个配置文件,通过他来寻找对应的servlet

  10. I like NetWorld

    liangfengbo.com ibobobo.com https.net.cn bobobo.com.cn scode.net scode.cc liangbolin.com linhe.cc li ...