用弹性布局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. 如何在VS2017中使用快捷键格式化代码？

    1.同时按住Ctrl键+A键,全选代码或要格式化的部分代码: 2.再按住Ctrl键,接着按一下K键,接着按一下F键.(注意:Ctrl键在按后面这2个键的时候一直是按着的,直到F键按完才松开).也就是俗 ...

  2. GO开发[四]：golang函数

    函数 1.声明语法:func 函数名 (参数列表) [(返回值列表)] {} 2.golang函数特点: a. 不支持重载,一个包不能有两个名字一样的函数 b. 函数是一等公民,函数也是一种类型,一个 ...

  3. TI-RTOS 定时器的使用

    定时器 在TI-RTOS中属于内核的一部分,因此想了解它的使用还是要阅读Bios_User_Guide.pdf. 主要用到这么几个API, 加粗字体 更多的定义可以在 ..\packages\ti\s ...

  4. [国嵌笔记][011][Linux密码破解]

    破解步骤 1.在系统启动时进入grub选项菜单 2.在grub选项菜单中按e进入编辑模式 3.编辑kernel行,添加 /init 1 (表示进入单用户启动模式,在单用户启动模式中不会要求输入密码) ...

  5. javascript之fill()方法

    无意中看到fill这个方法,有些不解,起初以为是人家自定义的方法,后来才发觉原来不是,javascript里面是真的有这个方法,于是特地学习了下. fill()方法的作用是使用一个固定值来替换数组中的 ...

  6. 4种常用扒站工具（webzip、ha_TeleportPro、Offline Explorer、wget）

    许多开始做lead,EMU的新手,需要一个英文网站,找人定制费用太贵自己又不会技术的话,可以通过扒站来获得英文站,今天给大家介绍几种扒站工具: 1.HA_TeleportPro: Teleport P ...

  7. plist涉及到沙盒的一个问题

    http://blog.csdn.net/wowxavi1/article/details/8557271

  8. HttpServletRequest cannot be resolved to a type。

    问题描述:HttpServletRequest cannot be resolved to a type.Multiple markers at this line - The import java ...

  9. 【fail2ban】使用fail2ban进行攻击防范

    使用fail2ban进行攻击防范 转自:https://kyle.ai/blog/6215.html 最近总有一些无聊的人,会来扫描一下我的服务器,看有没有啥漏洞可以利用的... 可以看到类似这样的4 ...

  10. confirm显示数组中的内容时，总是带一个逗号分隔的解决方法

    问题的关键 就是在给confirm显示之前,将数组转换成字符串,并以每个数组的元素为一个字符串,加上一个换行回车符即可: 代码中的背景色 为关键的点 <script type="tex ...