<!DOCTYPE html>

<html>

<head>

<style>

.box{ width: 300px; height: 100px; background-color: red; display: -webkit-box; display: -moz-box; display: box;}

.siblings-left{ -webkit-box-flex: ; -moz-box-flex: ; box-flex: ; background-color: green;}

.siblings-right{ -webkit-box-flex: ; -moz-box-flex: ; box-flex: ; background-color: blue;}

</style>

</head>

<body>

<div class="box">

    <div class="siblings-left"></div>

    <div class="siblings-right"></div>

</div>

</body>

</html>

均分，高版本可代替float

IE高低版本据不支持

box-flex 分割的更多相关文章

  1. box flex 弹性盒模型（转载）

    css3引入了新的盒模型——弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间.这与XUL(火狐使用的用户交互语言)相似,其它语言也使用相同的盒模型,如XAML .GladeX ...

  2. Flex 布局的教程

    前言:以前也经常用flex布局,但是最近看到别人使用的时候,发觉以前自己还是不够理解这个,重新看了一遍http://www.ruanyifeng.com/blog/2015/07/flex-gramm ...

  3. flex布局实现elment容器布局

    一.flex布局是什么 flex布局,意为"弹性布局",是一种响应式的布局方法 采用 Flex 布局的元素,称为 Flex 容器,它的所有子元素自动成为容器成员. 先放上一个ele ...

  4. css3 flex属性flex-grow、flex-shrink、flex-basis学习笔记

    最近在研究css3的flex.遇到的flex:1;这一块,很是很纠结,flex-grow.flex-shrink.flex-basis始终搞不清,最经搜集了大量的介绍,应该能算是明白了.网上大部分解释 ...

  5. Ext.js高级组件

    第二章:Ext.js高级组件 grid组件 普通方式 表格面板类Ext.grid.Panel xtype(别名):gridpanel.grid title标题.renderTo渲染至.width宽.h ...

  6. 5种样式实现div容器中三图摆放实例对比说明

    代码地址如下:http://www.demodashi.com/demo/11593.html 效果演示: demo点查看效果 需求说明: 如下图所示为设计图,希望在图片上传无规则无规律的情况下实现设 ...

  7. 性能是全新的 SEO

    作为一个前端project师,那不只就是公开地处理那些美丽的html5, css3 和javascript特效.小而重要的一部分工作就是要让项目朝着代码稳定和代码标准方向进展.设计.信息结构以及后台限 ...

  8. 两个input均分自适应

    最近项目中,做到了表格类似的表单 左边是标题,右边是输入框,由于种种和项目相关原因,我们采取了div布局 div label input*2div里面有1个input,有的时候,遇到日期,会有2个in ...

  9. 移动端base.css

    html { color: #333; /*规定主色调,依据业务场景(非必须)*/ background: #F6F6F6; /*规定主背景,依据业务场景(非必须)*/ overflow-y: aut ...

  10. 移动端超级好用的reset.css（只做参考哦具体以你们实际项目需求为准）

    html { color: #333; /*规定主色调,依据业务场景(非必须)*/ background: #F6F6F6; /*规定主背景,依据业务场景(非必须)*/ overflow-y: aut ...

随机推荐

  1. PHP开发工具介绍之zendStudio

    1．PHP开发工具介绍之zendStudio 下载:进入官网:http://www.zend.com/en/products/studio 选择下载安装 注意这里的工作空间要和你Apache的工作目录 ...

  2. Oracle中Blob和Clob类型的区别与操作

    Oracle中Blob和Clob类型 1.Oracle中Blob和Clob类型的区别 BLOB和CLOB都是大字段类型,BLOB是按二进制来存储的,而CLOB是可以直接存储文字的.其实两个是可以互换的 ...

  3. 【HDOJ】3686 Traffic Real Time Query System

    这题做了几个小时,基本思路肯定是求两点路径中的割点数目,思路是tarjan缩点,然后以割点和连通块作为新节点见图.转化为lca求解.结合点——双连通分量与LCA. /* 3686 */ #includ ...

  4. poj 1129 Channel Allocation ( dfs )

    题目:http://poj.org/problem?id=1129 题意:求最小m,使平面图能染成m色,相邻两块不同色由四色定理可知顶点最多需要4种颜色即可.我们于是从1开始试到3即可. #inclu ...

  5. poj 3087 Shuffle'm Up ( map 模拟 )

    题目:http://poj.org/problem?id=3087 题意:已知两堆牌s1和s2的初始状态, 其牌数均为c,按给定规则能将他们相互交叉组合成一堆牌s12,再将s12的最底下的c块牌归为s ...

  6. Unity3d插件推荐

    2D_Toolkit_1.51 动画开发插件包 FingerGestures 触摸插件 ORK_Okashi_RPG_Kit Unity3D角色扮演游戏开发工具包 uScript-Visual-Scr ...

  7. UVa 1643 Angle and Squares

    题意: 如图,有n个正方形和一个角(均在第一象限中),使这些正方形与这个角构成封闭的阴影区域,求阴影区域面积的最大值. 分析: 直观上来看,当这n个正方形的对角线在一条直线上时,封闭区域的面积最大.( ...

  8. 算法的时间复杂度(大O表示法)

    定义:如果一个问题的规模是n,解这一问题的某一算法所需要的时间为T(n),它是n的某一函数 T(n)称为这一算法的“时间复杂性”. 当输入量n逐渐加大时,时间复杂性的极限情形称为算法的“渐近时间复杂性 ...

  9. tomcat+oracle连接池

    tomcat 5.5.23 oracle 10g 全局配置 一.tomcat目录\common\lib下添加包ojdbc14.jar. 二.tomcat目录\conf\server.xml的<G ...

  10. java中volatitle关键字的作用

    用在多线程,同步变量. 线程为了提高效率,将某成员变量(如A)拷贝了一份(如B),线程中对A的访问其实访问的是B.只在某些动作时才进行A和B的同步.因此存在A和B不一致 的情况.volatile就是用 ...