用弹性布局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. NYoj_49开心的小明

    开心的小明 时间限制:1000 ms  |  内存限制:65535 KB 难度:4 描述 小明今天很开心,家里购置的新房就要领钥匙了,新房里有一间他自己专用的很宽敞的房间.更让他高兴的是,妈妈昨天对他 ...

  2. Content Provider Test过程中遇到的坑

    Content Provider(内容提供器) 一.什么是Content Provider? 直接贴官方文档简介图,笔者太懒了,而且 坑 不在这

  3. ASP.NET core1.0 EF MYSQL搭建中碰到几个问题记录

    1.No executable found matching command "dotnet-ef"   看了网上各种办法都没用,最后选择"个人用户账户"创建项 ...

  4. QQ邮箱开启SMTP服务的步骤

    首先要确保你的QQ邮箱已经要开启超过一个月.对于新开启的邮箱,腾讯是不开放这些功能的. 方法/步骤 首先点QQ头像旁边的信封符号进入邮箱. 当然你也可以使用 mail.qq.com进邮箱 进入邮箱后点 ...

  5. Struts2与Ajax数据交互

    写在前面: ajax请求在项目中常常使用,今天就平时掌握的总结一下,关于使用ajax请求到Struts2中的action时,前台页面与后台action之间的数据传递交互问题. 这里我主要记录下自己所掌 ...

  6. iOS关闭键盘的两种简单方法

    方法一: //1     [[[UIApplication sharedApplication] keyWindow] endEditing:YES]; ,为了关闭弹出的软键盘要遍历然后调用resig ...

  7. Angular 4 设置组件样式的几种方式

      你用Angular吗? 一.介绍 如何只改动最简单的css代码,呈现完全不一样的视图效果. 第一种:最基本的设置:   图1 代码 图2 界面运行效果图 平常,想给一个label或者p等标签添加样 ...

  8. [JS]Math.random()

    参考网址:http://www.soulteary.com/2014/07/05/js-math-random-trick.html [JS]Math.random()的二三事 看到题目,如果大家平时 ...

  9. 寄存器（CPU原理）

    body, table{font-family: 微软雅黑; font-size: 13.5pt} table{border-collapse: collapse; border: solid gra ...

  10. Oracle多表连接查询

    连接:将一张表中的行按照某种条件和另一张表中的行连接起来形成一个新行的的过程. 根据连接查询返回的结果,分为3类: 内连接(inner join) 外连接(outer join) 交叉连接(cross ...