<!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. 看文档要看仔细，英语要加强啊... cocos2d-x 的 API 和 对应版本的 cocos2d-js 的 API 没有完全对应

    /** * Sets the X rotation (angle) of the node in degrees which performs a horizontal rotational skew ...

  2. Linux 阿里云挂载新分区

    阿里云服务器可以自己购买数据盘并挂载使用,虽然官方也提供了挂载的教程,但是还是有些朋友不清楚其中的细节,为此,我在这里来给大家分享一下详细的挂载办法. 工具/原料 已经购买开通阿里云服务器,并且在开通 ...

  3. 安装Hadoop系列 — eclipse plugin插件编译安装配置

    [一].环境参数 eclipse-java-kepler-SR2-linux-gtk-x86_64.tar.gz //现在改为eclipse-jee-kepler-SR2-linux-gtk-x86_ ...

  4. P134、面试题22：栈的压入、弹出序列

    题目:输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是否为该栈的弹出顺序.假设压入栈的所有数字均不相等.例如序列1.2.3.4.5是某栈的压栈序列,序列4,5,3,2,1是该压栈序列对 ...

  5. SOA基础

    每个系统上都有多种业务逻辑,这就像在一个小超市中,一个人负责收银.清洁.摆货.咨询等各种各样的事情,当来超市的顾客多到一定程度,这个人就没办法再负责这么多的事情了,系统也同样如此. 第一个现象就是系统 ...

  6. FastScroll(3)分组的listview 打开fastscroll的分组提示功能

    1,让ListView显示分组(用两个layout) 2,让ListView实现sectionIndexer接口 3,代码如下: import java.util.ArrayList; import ...

  7. cf A. Inna and Pink Pony(思维题)

    题目:http://codeforces.com/contest/374/problem/A 题意:求到达边界的最小步数.. 刚开始以为是 bfs,不过数据10^6太大了,肯定不是... 一个思维题, ...

  8. bzoj3157 3516

    太神了,被数学题虐了 orz http://m.blog.csdn.net/blog/skywalkert/43970331 这道题关键是抓住m较小的特点,构造递推解决 ; ..,..] of lon ...

  9. SDOI2008Cave 洞穴勘测

    无限膜拜CLJ大牛…… 不会动态树的弱弱在CLJ的帮助下AC了此题 我想到了并查集(人人都会想到的吧……囧),但不知道应该如何处理destroy操作…… 其实 make操作的实质就是:把x节点到其所在 ...

  10. I.MX6 android shutdown 内核崩溃

    /**************************************************************************** * I.MX6 android shutdo ...