用弹性布局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 2356 哈希计划（模拟）

    题目链接: http://acm.nyist.me/JudgeOnline/problem.php?id=2356 题目描述 众所周知,LLM的算法之所以菜,就是因为成天打游戏,最近LLM突然想玩&l ...

  2. spring cloud-zuul的Filter详解

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

  3. console.log()的作用是什么

    主要是方便你调式javascript用的.你可以看到你在页面中输出的内容. 相比alert他的优点是: 他能看到结构话的东西,如果是alert,淡出一个对象就是[object object],但是co ...

  4. 宝塔服务器管理助手Linux面版-使用教程

    在顺利安装宝塔服务器linux面板之后,我们打开这个面板,UI界面设计的很简介,所有命令一看就知道是干什么用的,和我们以前用过的虚拟主机管理后台是很像的. 方法/步骤 1 使用方法如下: 面板地址:h ...

  5. 给织梦DEDECMS添加栏目图片与英文名显示

    开始做微网站了,不同于传统手机网站,因为微信上的微网站是支持CSS3与HTML5的,好吧,各种要学习的还有很多很多阿~这么多新代码,叹! 本来想转战帝国CMS了,奈何这名字太不对味了,PHPCMS也懒 ...

  6. async函数解析

    转载请注明出处:async函数解析 async函数是基于Generator函数实现的,也就是说是Generator函数的语法糖.在之前的文章有介绍过Generator函数语法和异步应用,如果对其不了解 ...

  7. Postgresql中string转换成timestamp类型

    Mybatis+Postgresql TO_DATE(#{startTime}, 'YYYY-MM-DD') AND op_date <![CDATA[>= ]]>  TO_TIME ...

  8. MySQL浅谈 LEFT JOIN

    On条件(在“A left join b on conditional_expr”)决定如何从table B 中检索数据行(Matching-State); 如果B中没有行匹配On 条件,额外的B的所 ...

  9. servlet入门学习之Web容器

    一.web服务器 web服务器(程序/软件) 即:www服务器或http服务器.提供Web信息浏览服务.它只需支持HTTP协议.HTML文档格式及URL.向浏览器提供服务的程序. 1.Web服务器是指 ...

  10. Linuxc - Makefile完成项目的管理。

    Makefile完成项目的管理. root@jiqing-virtual-machine:~/cspace/les2# ls main.c Makefile max.c max.h min.c min ...